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).

Details:

• The distance between the element and the tooltip should be 5px.
• 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-tooltip attribute. It can be arbitrary HTML.

You’ll need two events here:

• mouseover triggers when a pointer comes over an element.
• mouseout triggers 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.

After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.

P.S. Only one tooltip may show up at a time.