component · help

TuxTooltip

Keyboard-accessible hover-help. Thin wrapper around UTooltip that adds a hairline rule under the title and tunes max-width to ~22ch for a comfortable 2–3 line body. Show / hide on hover or focus; reka-ui handles edge collision and keyboard accessibility.

For richer floating panels (title + body + CTA + dismiss), use TuxTeachingPopover (onboarding) or UPopover directly. This is short hover-help only.

basic

Text only

<tux-tooltip text="Last updated 8 minutes ago">
  <tux-button intent="ghost" icon="lucide:refresh-cw" />
</tux-tooltip>

title + body

Concept explainer

Use the title prop when the trigger doesn't name the concept by itself — e.g., an (i) icon next to a field. The hairline rule under the title is the editorial cue.

Drift reconciler status i
<tux-tooltip
  title="Drift reconciler"
  text="Closes stale index entries every 30 minutes."
>
  <span class="info-anchor">i</span>
</tux-tooltip>

keyboard shortcut

Shortcut hint

<tux-tooltip text="Open command palette" :kbds="['⌘', 'K']">
  <tux-button intent="ghost" icon="lucide:command" />
</tux-tooltip>