Tooltip
@xui/tooltipA hint that floats over an element on hover or focus. A thin preset over the same @xui/core/overlay foundation as the popover — non-interactive, opens on focus for keyboard users, and describes its trigger via aria-describedby. Hover, focus and positioning cannot be exercised in jsdom, so these stories are where that behaviour is verified.
Install
pnpm add @xui/tooltip Add the barrel to a standalone component's imports:
import { XuiTooltipImports } from '@xui/tooltip';
@Component({
imports: [XuiTooltipImports],
// …
})Examples
Default
Loading preview…
<button xuiButton [xuiTooltip]="'Saves without leaving the page'">Save draft</button>Colors
Loading preview…
<div class="flex flex-wrap gap-3 p-12">
@for (color of colors; track color) {
<button xuiButton variant="outline" [xuiTooltip]="color + ' hint'" [color]="color">{{ color }}</button>
}
</div>Compact
Loading preview…
<button xuiButton [xuiTooltip]="'Undo'" compact>Undo</button>Placements
Loading preview…
<div class="grid grid-cols-3 gap-3 p-24">
@for (p of placements; track p) {
<button xuiButton size="sm" variant="outline" [xuiTooltip]="p" [placement]="p">{{ p }}</button>
}
</div>Template content
Loading preview…
<button xuiButton [xuiTooltip]="rich">Shortcuts</button>
<ng-template #rich>
<div class="flex flex-col gap-1">
<span>Save <kbd class="bg-background/20 rounded px-1">⌘S</kbd></span>
<span>Undo <kbd class="bg-background/20 rounded px-1">⌘Z</kbd></span>
</div>
</ng-template>API
The chip a tooltip's text sits on.
Variants
colorcompactA hint that floats over an element on hover or focus.
Inputs
contentstring | TemplateRef<unknown> | null | undefinedThe hint. A string, or a template for rich content. Aliased to the selector.contextRecord<string, unknown>Values a template content destructures with let-.placementXPlacementPreferred side and alignment relative to the target. The overlay flips it when there is no room.this.config.placementcolorXuiTooltipColorIntent colour of the bubble.this.config.colorcompactbooleanTighter padding and smaller text, for one-word hints.this.config.compactopenOnTargetFocusbooleanAlso open when the target takes keyboard focus, so the hint is reachable without a pointer.this.config.openOnTargetFocusoffsetnumberGap in pixels between the target and the bubble.this.config.offsethoverOpenDelaynumberMilliseconds the pointer must rest on the target before the tooltip opens. Keeps it from firing on the way past.this.config.hoverOpenDelayhoverCloseDelaynumberMilliseconds before the tooltip closes after the pointer leaves.this.config.hoverCloseDelaydisabledbooleanA disabled tooltip never opens, and hides if it was showing.falseopenbooleanWhether the tooltip is currently on screen. Two-way bindable: an external write opens or closes the overlay, and hover/focus changes fold back out.false