Tooltips

Tooltips are CSS-only — no JavaScript required. Wrap a trigger and a .ziom-tooltip in a .ziom-tooltip-wrapper, or use the data-ziom-tooltip attribute shorthand. Hover the examples below.

Positions

HTML

<span class="ziom-tooltip-wrapper">
  <button class="ziom-btn ziom-btn-secondary">Top</button>
  <span class="ziom-tooltip ziom-tooltip-top">Tooltip on top</span>
</span>
<span class="ziom-tooltip-wrapper">
  <button class="ziom-btn ziom-btn-secondary">Bottom</button>
  <span class="ziom-tooltip ziom-tooltip-bottom">Tooltip on bottom</span>
</span>
<span class="ziom-tooltip-wrapper">
  <button class="ziom-btn ziom-btn-secondary">Right</button>
  <span class="ziom-tooltip ziom-tooltip-right">Tooltip on right</span>
</span>

Data Attribute Shorthand

For simple text tooltips, skip the wrapper entirely.

HTML

<button class="ziom-btn ziom-btn-primary" data-ziom-tooltip="Saves your changes">Hover me</button>