Tooltip

Contextual information on hover using the data-tooltip attribute.

Basic Tooltip

<button data-tooltip="This is helpful information">
  Hover me
</button>

On Different Elements

Hover over CSS to see the tooltip.

External link

HTML is the structure.

<p>
  Hover over <span data-tooltip="Cascading Style Sheets">CSS</span> to see the tooltip.
</p>

<p>
  <a href="#" data-tooltip="Opens in a new window">External link</a>
</p>

<p>
  <abbr data-tooltip="HyperText Markup Language">HTML</abbr> is the structure.
</p>

With Icon Buttons

<button data-tooltip="Settings" aria-label="Settings">
  ⚙️
</button>

<button data-tooltip="Help" aria-label="Help">
  ❓
</button>

<button data-tooltip="Delete item" aria-label="Delete item">
  🗑️
</button>

Form Field Hints

<label data-tooltip="We'll never share your email">
  Email
  <input type="email" placeholder="you@example.com">
</label>

Accessibility Notes

Tooltips show on hover and focus
Always provide accessible alternatives (aria-label, visible text)
Don't rely on tooltips for essential information
Keep tooltip text concise