30 lines
No EOL
1.4 KiB
Markdown
30 lines
No EOL
1.4 KiB
Markdown
# События
|
||
|
||
Три события имеют отношение к подсказке:
|
||
<ol>
|
||
<li>При `mouseover` -- показать.</li>
|
||
<li>При `mousemove` -- показать на новом месте.</li>
|
||
<li>При `mouseout` -- спрятать.</li>
|
||
</ol>
|
||
|
||
...Но при заходе на элемент происходят сразу оба события: `mouseover` и `mousemove` на нём же. Зачем вызывать код для показа два раза? Можно оставить его только в `mousemove`.
|
||
|
||
Стиль элемента подсказки:
|
||
|
||
```css
|
||
.tooltip {
|
||
position:absolute;
|
||
z-index:100; /* подсказка должна перекрывать другие элементы */
|
||
...
|
||
}
|
||
```
|
||
|
||
# Решение
|
||
|
||
[edit src="solution"]Решение в песочнице[/edit]
|
||
|
||
В нём есть две тонкости.
|
||
<ol>
|
||
<li>Для того, чтобы можно было получить высоту и ширину, подсказку надо сначала показать.</li>
|
||
<li>При показе -- важно, чтобы подсказка не оказалась *под* курсором. Если такое произойдет, то дальнейшие события `mousemove` станут происходить *уже на подсказке*, а не на элементе, и их обработка сломается.</li>
|
||
</ol> |