A Tooltip Library From data Attributes
Build a native tooltip library driven by data- attributes rather than a React component: write initTooltips(root = document) in tooltips.js; the page wiring is in demo.js.
Requirements
- Any element with a
data-tooltipattribute shows that text in a tooltip on hover and on keyboard focus, and hides it on leave, on blur and on Escape. - It works for elements added after
initTooltipsran. The demo's "Add a button" button tests this. - The tooltip has
role="tooltip", and its target points at it witharia-describedbywhile it shows. - The text is shown as text. The History link's attribute contains markup that must not render.
Hints
Hint 1
Create one tooltip node, and listen on root, not on each target. mouseover, mouseout, focusin and focusout bubble, which is what makes delegation work, while mouseenter and focus don't bubble.
Hint 2
Find the target with event.target.closest("[data-tooltip]"). On mouseout, ignore moves into a child of the same element: check el.contains(event.relatedTarget).