Tooltip

Hover-triggered floating contextual text. Built on Aurora's Popper primitive. Aurora ships two ergonomic wrappers — TextTooltip for a title + body, and RichTextTooltip for a list of structured items — plus the lower-level primitives (Tooltip, TooltipTrigger, TooltipContent) when you need custom tooltip-body markup.

<TextTooltip content="Tooltip content rendered via aurora.">
  <Button>Hover me</Button>
</TextTooltip>

Prefer the wrappers. The primitives exist for the rare case where the body needs structure beyond what the wrappers provide.

When to reach for a tooltip

• Icon-only buttons or controls where the label isn't always visible — toolbars, table-row actions
• Form fields and inputs — brief field-level hints that don't deserve permanent helper text
• Truncated text — reveal the full value on hover
• Abbreviations and technical terms — define on first use
• Data points in charts and dashboards — name the value the user is hovering

When not to use a tooltip

• Critical information that the user needs to complete a task — make it visible (inline helper text or a callout)
• Long explanations that need to be read carefully — use a popover or Modal instead
• Interactive content (links, buttons, forms) — tooltips dismiss on hover-out, so anything inside them is hard to reach. Use a popover.
• Replacing visible labels on important actions — the label should be visible, with the tooltip reinforcing
• Mobile-first interactions — hover doesn't exist on touch devices; design a non-hover affordance for those flows

TextTooltip — With title

<TextTooltip title="Saved actions" content="Quick links to recent changes you've made.">
  <Button variant="secondary">With title</Button>
</TextTooltip>

TextTooltip — Placements

placement accepts the 12 variants documented in the props table.

<TextTooltip content="Top tooltip" placement="top">
  <Button>Top</Button>
</TextTooltip>
<TextTooltip content="Bottom-end" placement="bottom-end">
  <Button>Bottom-end</Button>
</TextTooltip>

TextTooltip — Connected (no offset)

Removes the gap between the trigger and tooltip — useful when the tooltip should feel part of the trigger surface.

<TextTooltip content="Connected directly to the trigger." placement="top-start" connected>
  <Button>Connected</Button>
</TextTooltip>

TextTooltip — Border variants

<TextTooltip content="Success border" border="success">…</TextTooltip>

RichTextTooltip

For tooltips that need to surface a list of items with optional titles. Use sparingly — if you reach for this often, consider a Popover.

<RichTextTooltip :items="items">
  <Button>Show details</Button>
</RichTextTooltip>

items is { title?: string; description: string }[].

Information-icon trigger

When TooltipTrigger's default slot is empty, it renders an inline help-icon (information-circle-outline). Useful for inline contextual help next to a form label or table header.

Annual revenue

<Tooltip placement="top">
  <TooltipTrigger />
  <TooltipContent compact>
    <p>Reported revenue from the last fiscal year.</p>
  </TooltipContent>
</Tooltip>

TextTooltip — Props

Prop	Type	Default	Description
content	string	required	Body text.
title	string	—	Optional bold title above the content.
placement	'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'	'top'	Anchor side of the tooltip relative to the trigger.
border	'default' | 'primary' | 'success' | 'warning' | 'error' | 'ai' | 'energy' | 'ghg' | 'waste' | 'water'	'default'	Border accent color.
connected	boolean	false	Remove the offset gap between trigger and tooltip.
disabled	boolean	false	Disable the tooltip; trigger renders without hover behavior.
closeDelay	number	0	Milliseconds to wait before closing on mouse-out.
animate	boolean	false	Enable open/close animation.

RichTextTooltip — Props

RichTextTooltip accepts everything TextTooltip does plus:

Prop	Type	Default	Description
items	{ title?: string, description: string }[]	required	List of items to render.
maxVisibleItems	number	—	Cap on how many items are shown before scroll.

Slots (both wrappers)

Slot	Description
default	The trigger element. Receives { disabled, isOpen, close, open } slot props for advanced flows.