v1.1.8

Tooltip

A popup that displays information related to an element when the element receives hover focus.

Default

Hover over the buttons to see tooltips.

html
Add to library
Add new item 
<div class="uc-tooltip-wrap">
  <button>Hover me</button>
  <div class="uc-tooltip">
    Tooltip text
  </div>
</div>

Positions

Tooltip placement on all four sides.

html
Tooltip on top
Tooltip on bottom
Tooltip on left
Tooltip on right 
<!-- Top -->
<div class="uc-tooltip-wrap">
  <button>Top</button>
  <div class="uc-tooltip">
    Tooltip on top
  </div>
</div>

<!-- Bottom -->
<div class="uc-tooltip-wrap">
  <button>Bottom</button>
  <div class="uc-tooltip uc-tooltip-bottom">Tooltip on bottom</div>
</div>

With Keyboard Shortcut

Tooltip with additional keyboard shortcut hint.

html
Save changes ⌘S
Copy to clipboard ⌘C
Delete item ⌘⌫ 
<div class="uc-tooltip-wrap">
  <button>Save</button>
  <div class="uc-tooltip">
    Save changes
    <kbd>&#8984;S</kbd>
  </div>
</div>

Toolbar with Tooltips

Icon buttons with tooltip labels.

html
Edit
Copy
Align
Settings
<div class="uc-inline-flex uc-items-center uc-gap-1 uc-p-1
  uc-rounded-2xl uc-border uc-border-border-default">
  <div class="uc-tooltip-wrap">
    <button class="uc-h-8 uc-w-8 uc-rounded-lg uc-flex
      uc-items-center uc-justify-center">
      <svg class="uc-w-4 uc-h-4">...</svg>
    </button>
    <div class="uc-tooltip">Edit</div>
  </div>
</div>

API Reference

All CSS classes available for the Tooltip component.

Class Type Description
uc-tooltip-wrap Base Wrapper for trigger and tooltip — adds position:relative and hover reveal
uc-tooltip Base Tooltip element — positioned above trigger by default, centered
uc-tooltip-bottom Position Bottom placement — centered below trigger
uc-tooltip-left Position Left placement — centered to the left
uc-tooltip-right Position Right placement — centered to the right
uc-bg-accents-red Variant Red tooltip for destructive action hints
uc-border-4 uc-border-transparent uc-border-t-accents-blue Style CSS arrow triangle pointing toward trigger

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use role="tooltip" on the tooltip content element
Association Trigger element has aria-describedby pointing to tooltip id
Keyboard Tooltip shows on focus and hides on Escape
Hover Include delay before showing/hiding to prevent flickering
Content Keep tooltip text concise — for complex content use a popover instead