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