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-relative uc-group">
  <button>Hover me</button>
  <div class="uc-absolute uc-bottom-full uc-left-1/2 uc--translate-x-1/2 uc-mb-2 uc-px-3 uc-py-1.5 uc-rounded-lg uc-bg-accents-blue uc-text-constant-white uc-text-xs uc-opacity-0 uc-group-hover:opacity-100 uc-transition-opacity uc-pointer-events-none">
    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-relative uc-group">
  <button>Top</button>
  <div class="uc-absolute uc-bottom-full uc-left-1/2
    uc--translate-x-1/2 uc-mb-2 uc-px-3 uc-py-1.5
    uc-rounded-lg uc-bg-accents-blue uc-text-constant-white
    uc-text-xs uc-opacity-0 uc-group-hover:opacity-100
    uc-transition-opacity uc-pointer-events-none">
    Tooltip on top
  </div>
</div>

<!-- Bottom -->
<div class="uc-relative uc-group">
  <button>Bottom</button>
  <div class="uc-absolute uc-top-full uc-left-1/2
    uc--translate-x-1/2 uc-mt-2 ...">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-relative uc-group">
  <button>Save</button>
  <div class="uc-absolute uc-bottom-full ... uc-flex uc-items-center uc-gap-2">
    <span class="uc-font-medium">Save changes</span>
    <kbd class="uc-rounded uc-px-1 uc-py-0.5 uc-text-[10px]
      uc-bg-constant-white/20 uc-font-mono">&#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-relative uc-group">
    <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-absolute uc-bottom-full ... uc-opacity-0
      uc-group-hover:opacity-100">Edit</div>
  </div>
</div>

API Reference

All CSS classes available for the Tooltip component.

Class Type Description
uc-relative uc-group Base Wrapper for trigger and tooltip using CSS group hover
uc-absolute uc-bottom-full uc-left-1/2 uc--translate-x-1/2 uc-mb-2 Position Top placement (default) — centered above trigger
uc-absolute uc-top-full uc-left-1/2 uc--translate-x-1/2 uc-mt-2 Position Bottom placement — centered below trigger
uc-absolute uc-right-full uc-top-1/2 uc--translate-y-1/2 uc-mr-2 Position Left placement — centered to the left
uc-absolute uc-left-full uc-top-1/2 uc--translate-y-1/2 uc-ml-2 Position Right placement — centered to the right
uc-rounded-lg uc-bg-accents-blue uc-text-constant-white Style Blue tooltip with white text
uc-bg-accents-red Variant Red tooltip for destructive action hints
uc-text-xs uc-font-medium uc-whitespace-nowrap Typography Small, bold text that does not wrap
uc-opacity-0 uc-group-hover:opacity-100 uc-transition-opacity Animation Fade in on hover, fade out on leave
uc-pointer-events-none Behavior Prevents tooltip from blocking interactions
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