Tooltip

A Base UI-backed tooltip with default and destructive variants, plus an `InfoTooltip` helper for "?" hints.

Usage

import {
  InfoTooltip,
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@epilot/spark-ui/tooltip'

Wrap your tree (typically the app root) with <TooltipProvider> once. The provider defaults delay to 0 so tooltips appear instantly on hover.

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger
      render={
        <Button styleVariant="surface" color="neutral">
          Refresh
        </Button>
      }
    />
    <TooltipContent>Forces a battery refresh</TooltipContent>
  </Tooltip>
</TooltipProvider>

Examples

Destructive variant

Use variant="destructive" to flag tooltips on actions with non-trivial consequences.

`InfoTooltip` helper

For the common "?" / info-icon-next-to-a-label case, InfoTooltip bundles the trigger button, accessible label, and content into a single component.

Autarky

API Reference

Built on Base UI Tooltip. See the Base UI docs for the full API (Tooltip open state, TooltipTrigger render, provider delay, …). Spark additions:

`TooltipContent`

Extends Base UI Tooltip.Popup props and forwards the positioning props to the positioner.

Prop	Type	Default
`variant`	`"default"` \| `"destructive"`	`"default"`
`hideArrow`	`boolean`	`false`
`side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"`	`"top"`
`sideOffset`	`number`	`4`
`align`	`"start"` \| `"center"` \| `"end"`	`"center"`
`alignOffset`	`number`	`0`

`InfoTooltip`

Prop	Type	Default
`label`	`string`	—
`content`	`string`	—
`aria-label`	`string`	`label` (override to localize)

`TooltipProvider`

Re-exports Base UI's Provider with delay={0} as the default.

Tooltip

On this page