Create JS-code for the tooltip behavior.
When a mouse comes over an element with
data-tooltip, the tooltip should appear over it, and when it’s gone then hide.
An example of annotated HTML:
<button data-tooltip="the tooltip is longer than the element">Short button</button> <button data-tooltip="HTML<br>tooltip">One more button</button>
Should work like this:
In this task we assume that all elements with
data-tooltip have only text inside. No nested tags (yet).
- The distance between the element and the tooltip should be
- The tooltip should be centered relative to the element, if possible.
- The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there’s no space for the tooltip, then below it.
- The tooltip content is given in the
data-tooltipattribute. It can be arbitrary HTML.
You’ll need two events here:
mouseovertriggers when a pointer comes over an element.
mouseouttriggers when a pointer leaves an element.
Please use event delegation: set up two handlers on
document to track all “overs” and “outs” from elements with
data-tooltip and manage tooltips from there.
P.S. Only one tooltip may show up at a time.