← All challenges
Challenge
Custom Tooltip
Medium- css
Give a button a styled tooltip that appears above it on hover and disappears when the pointer leaves. It must not be the browser's native title tooltip. Drive it from a data attribute, so the same rule could label any element.
Notes:
- The starter button has the class
has-tooltipanddata-tooltip="This is a tooltip". Your CSS can read that attribute, so the text never has to be written into the stylesheet. - No JavaScript is needed.
Check your work against
- Hovering shows a custom-styled tooltip, not the native browser tooltip
- The tooltip is positioned near the hovered element
- It disappears on mouse-leave
- The tooltip text comes from a data attribute so the same pattern could label any element
No automatic grading
Check your work against the list above, then compare it with the solution preview.
Tab indents. Press Esc, then Tab to leave the editor.
Live preview
Starter loaded. The preview updates as you type.