Tooltip — Cider UI

Selectors

[data-tooltip]: Adds a hover tooltip displaying the attribute value. Works on any element.

Add data-tooltip="Label" to any element. The tooltip appears on hover (with a 0.6s delay matching macOS) and on :focus-visible.

Icon Buttons

HTML

<div class="flex items-center gap-4">
  <button class="btn-gray size-11 p-0" data-tooltip="Edit" aria-label="Edit">
    <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
  </button>
  <button class="btn-gray size-11 p-0" data-tooltip="Delete" aria-label="Delete">
    <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
  </button>
  <button class="btn-gray size-11 p-0" data-tooltip="Share" aria-label="Share">
    <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
  </button>
</div>

On Any Element

John Doe CSS

HTML

<div class="flex items-center gap-6">
  <span data-tooltip="Online" class="inline-block size-3 rounded-full bg-green"></span>
  <a href="#" data-tooltip="View profile">John Doe</a>
  <abbr data-tooltip="Cascading Style Sheets">CSS</abbr>
</div>

In Toolbar

HTML

<div class="toolbar">
  <div class="toolbar-group">
    <button data-tooltip="Bold" aria-label="Bold">
      <svg class="size-4" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg>
    </button>
    <button data-tooltip="Italic" aria-label="Italic">
      <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
    </button>
    <button data-tooltip="Underline" aria-label="Underline">
      <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
    </button>
  </div>
</div>