Tooltip
MediumDOM Manipulation20 min5 tests
Build a tooltip that appears on hover and keyboard focus, and disappears on mouse-out and blur.
Build an accessible tooltip. When the user hovers over (or keyboard-focuses) the Hover me button, show a <div role="tooltip"> reading "Helpful tip". Hide it again on mouse-out or blur. Supporting focus as well as hover keeps the tooltip keyboard-accessible.
Requirements
- No tooltip is shown initially.
- On hover (onMouseOver) the tooltip appears as an element with role="tooltip" and the text "Helpful tip".
- On mouse-out (onMouseOut) the tooltip is removed from the document.
- The tooltip also appears on keyboard focus (onFocus) and hides on blur (onBlur).
Hints (3)
- Hold the open/closed state in useState(false).
- Use onMouseOver + onFocus to show, onMouseOut + onBlur to hide.
- Only render the <div role="tooltip"> when open is true, so it is absent from the document when closed.
Topics
- React
- DOM Manipulation
Asked at
Zerodha · Freshworks · Ola · Amazon · Nykaa · Atlassian
