Создайте всплывающую подсказку над элементом.
Подсказка должна появляться при наведении на элемент, по центру и на небольшом расстоянии сверху. При уходе курсора с элемента — исчезать.
Вы можете посмотреть поведение подсказки в ифрейме ниже, наведя курсор на ссылку.
Способ добавления подсказки к элементу:
new Tooltip(elem, "Вот <b>такая</b> подсказка!");
- В подсказке и элементе, на который она поставлена, может быть произвольный HTML. Оформление подсказки должно задаваться CSS.
- Не надо рассматривать случай, когда у вложенного элемента своя подсказка, отдельная от родителя, т.к. такого не бывает.
- Допустимо вылезание подсказки за пределы видимой области, если элемент расположен у верхней границы окна.
- Объект подсказки не должен иметь публичных методов, только приватные.
Исходный документ: tutorial/browser/events/tooltip-fixed-src/index.html.
P.S. Возможно, вам понадобятся функции fixEvent и getCoords. Они приложены к документу в файле lib.js.
P.P.S. Можно сверстать подсказки и при помощи CSS, если элементы заранее известны и их мало. JS-подход более универсален и не зависит от вёрстки.
Для управления подсказкой нам понадобятся два события:
- Наведение на элемент
mouseover - Уход с элемента
mouseout
Скелет кода:
function Tooltip(elem, text) {
var offsetFromElement = 10; // отступ подсказки от элемента 10px
var tooltipElem; // тут будет DOM-элемент для подсказки
elem.onmouseout = function() {
hide(); // спрятать подсказку
};
elem.onmouseover = function() {
show(); // показать подсказку
};
}
Функция show должна при первом показе сгенерировать элемент с подсказкой, а затем — показать в нужном месте страницы.
Для генерации подсказки добавим вспомогательную функцию getTooltipElem(). Она будет возвращать существующий элемент, если он есть, а если нет — генерировать новый.
function getTooltipElem() {
if (!tooltipElem) {
tooltipElem = document.createElement('div');
tooltipElem.className = 'tooltip';
tooltipElem.innerHTML = text;
}
return tooltipElem;
}
Основная настройка вида подсказки будет в CSS-классе tooltip.
Например:
.tooltip {
position:absolute;
left: -9999px; /* за пределами экрана */
z-index:100; /* подсказка должна перекрывать другие элементы */
background: #F0FFF0;
padding: 5px;
border: 1px dashed green;
text-align: center;
}
Как правильно отпозиционировать подсказку? Для начала, по горизонтали.
Центр подсказки должен быть ровно над центром элемента, который имеет координату getCoords(elem).left + elem.offsetWidth/2.
Если поставить tooltipElem.left в это значение — результат будет выглядеть так:
Дополнительно нужно сдвинуть подсказку на половину собственной ширины влево:
Теперь отпозиционируем по вертикали.
Это гораздо проще: нужно взять координату getCoords(elem).top и вычесть из неё высоту подсказки и дополнительный отступ:
Для того, чтобы определить высоту подсказки offsetHeight, она должна быть в DOM со свойством display, не равным none.
Поэтому мы позиционируем её за пределами видимой области, поставив left:-9999px.
В качестве альтренативы можно было бы использовать для скрытия visibility:hidden. Это свойство, в отличие от display:none, оставляет элементу размеры, просто делает его невидимым.
Полный код решения демонстрирует эти подходы на tutorial/browser/events/tooltip-fixed/index.html.