Skip to main content

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.

Interactive Component Playground

TuxTooltip Workbench

Presets:

Hover or Tab-focus the button to inspect tooltip placement.

Properties Inspector4 configurable knobs
Tooltip Titletitle
Body Texttext
Placement Sideside
Show Pointer Arrowarrow
true
Dynamic Component Syntax
<tux-tooltip text="Closes stale index entries every 30 minutes by scanning live telemetry storage." title="Drift Reconciler">
  <tux-button intent="secondary" icon="lucide:info">Inspect Details</tux-button>
</tux-tooltip>

basic

Text only

<tux-tooltip text="Last updated 8 minutes ago">
  <tux-button intent="ghost" icon="lucide:refresh-cw">Refresh</tux-button>
</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">Palette</tux-button>
</tux-tooltip>