32 lines
No EOL
1.9 KiB
Markdown
32 lines
No EOL
1.9 KiB
Markdown
# Подсказка над элементом
|
||
|
||
[importance 5]
|
||
|
||
Создайте всплывающую подсказку над элементом.
|
||
|
||
Подсказка должна появляться при наведении на элемент, по центру и на небольшом расстоянии сверху. При уходе курсора с элемента -- исчезать.
|
||
|
||
Вы можете посмотреть поведение подсказки в ифрейме ниже, наведя курсор на ссылку.
|
||
|
||
[iframe src="solution" height=200 link border=1]
|
||
|
||
Способ добавления подсказки к элементу:
|
||
|
||
```js
|
||
new Tooltip({
|
||
elem: $('#elem'),
|
||
html: "Вот <b>такая</b> подсказка!",
|
||
// вертикальное расстояние от подсказки до элемента
|
||
offset: 20 // необязательный параметр, по умолчанию 10
|
||
});
|
||
```
|
||
|
||
<ul>
|
||
<li>В подсказке и элементе, на который она поставлена, может быть произвольный HTML. Оформление подсказки должно задаваться CSS.</li>
|
||
<li>Подсказка не должна вылезать за пределы экрана, если нельзя показать сверху -- показывать снизу элемента.</li>
|
||
<li>Объект подсказки не должен иметь публичных методов, только приватные.</li>
|
||
</ul>
|
||
|
||
[edit src="task" task/]
|
||
|
||
P.S. Подсказки, если их мало, можно реализовать и при помощи CSS. Но JS-подход более универсален и не зависит от вёрстки, в частности, он может проверять, не вылезает ли подсказка за экран. |