en.javascript.info/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
Ilya Kantor fc84391bd2 up
2017-03-09 00:48:54 +03:00

25 lines
677 B
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

importance: 5
---
# Improved tooltip behavior
Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`.
That's like the task <info:task/behavior-tooltip>, but here the annotated elements can be nested. The most deeply nested tooltip is shown.
For instance:
```html
<div data-tooltip="Here is the house interior" id="house">
<div data-tooltip="Here is the roof" id="roof"></div>
...
<a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a>
</div>
```
The result in iframe:
[iframe src="solution" height=300 border=1]
P.S. Hint: only one tooltip may show up at the same time.