en.javascript.info/02-ui/05-widgets/06-widget-tasks/01-tooltip-over-element/task.md
Ilya Kantor f301cb744d init
2014-10-26 22:10:13 +03:00

1.9 KiB
Raw Blame History

Подсказка над элементом

[importance 5]

Создайте всплывающую подсказку над элементом.

Подсказка должна появляться при наведении на элемент, по центру и на небольшом расстоянии сверху. При уходе курсора с элемента -- исчезать.

Вы можете посмотреть поведение подсказки в ифрейме ниже, наведя курсор на ссылку.

[iframe src="solution" height=200 link border=1]

Способ добавления подсказки к элементу:

new Tooltip({
  elem: $('#elem'), 
  html: "Вот <b>такая</b> подсказка!",
  // вертикальное расстояние от подсказки до элемента
  offset: 20 // необязательный параметр, по умолчанию 10
});
  • В подсказке и элементе, на который она поставлена, может быть произвольный HTML. Оформление подсказки должно задаваться CSS.
  • Подсказка не должна вылезать за пределы экрана, если нельзя показать сверху -- показывать снизу элемента.
  • Объект подсказки не должен иметь публичных методов, только приватные.

[edit src="task" task/]

P.S. Подсказки, если их мало, можно реализовать и при помощи CSS. Но JS-подход более универсален и не зависит от вёрстки, в частности, он может проверять, не вылезает ли подсказка за экран.