CodeOath
← All challenges

Custom Tooltip

Medium
css

Build a custom, styled tooltip: hovering over an element shows a small label above it (not the plain native browser title tooltip), positioned near the element and gone on mouse-leave. Do it as a reusable pattern (driven by a data attribute), not one-off hardcoded positioning for a single element.

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

There's no automated grading for UI challenges — self-check against this list, then compare with the solution preview.

Live preview