Tooltips

Tooltips display informative text when users hover over, focus on, or tap an element.

Waterhole uses the inclusive tooltip element for tooltips. .visually-hidden styles are automatically applied to the <ui-tooltip> element.

<!-- Tooltip as primary label -->
<button class="btn btn--icon">
  @icon('tabler-bookmark')
  <ui-tooltip>Bookmarks</ui-tooltip>
</button>

<!-- Tooltip as auxiliary description -->
<button class="btn" aria-describedby="settings-description">
  @icon('tabler-settings')
  Settings
  <ui-tooltip id="settings-description" hidden>
    View and manage settings
  </ui-tooltip>
</button>

Tooltips#

Tooltips