Fumadocs on TanStack Start

Overview

The Tooltip component provides contextual information when users hover over or focus on an element. It features smooth animations, flexible positioning, and automatic arrow indicators that point to the trigger element.

Import

import { Tooltip } from "@px-ui/core";

Usage

<Tooltip.Root>
  <Tooltip.Trigger>
    <Button variant="outline">Hover me</Button>
  </Tooltip.Trigger>
  <Tooltip.Content>
    <p>This is a helpful tooltip</p>
  </Tooltip.Content>
</Tooltip.Root>

Examples

Positions

Tooltips can be positioned on any side of the trigger element using the side prop.

<Tooltip.Root>
  <Tooltip.Trigger>
    <Button variant="outline">Top</Button>
  </Tooltip.Trigger>
  <Tooltip.Content side="top">
    <p>Tooltip on top</p>
  </Tooltip.Content>
</Tooltip.Root>

<Tooltip.Root>
  <Tooltip.Trigger>
    <Button variant="outline">Bottom</Button>
  </Tooltip.Trigger>
  <Tooltip.Content side="bottom">
    <p>Tooltip on bottom</p>
  </Tooltip.Content>
</Tooltip.Root>

With Icon

Tooltips are commonly used with info icons to provide additional context without cluttering the UI.

Payment method

<div className="flex items-center gap-2">
  <span>Payment method</span>
  <Tooltip.Root>
    <Tooltip.Trigger>
      <button>
        <InfoIcon />
      </button>
    </Tooltip.Trigger>
    <Tooltip.Content>
      <p>We accept all major credit cards and PayPal</p>
    </Tooltip.Content>
  </Tooltip.Root>
</div>

Delay

Control when the tooltip appears using the delay prop to avoid showing tooltips too quickly during casual mouse movement.

<Tooltip.Root delay={0}>
  <Tooltip.Trigger>
    <Button variant="outline">No delay</Button>
  </Tooltip.Trigger>
  <Tooltip.Content>
    <p>Appears immediately</p>
  </Tooltip.Content>
</Tooltip.Root>

<Tooltip.Root delay={500}>
  <Tooltip.Trigger>
    <Button variant="outline">500ms delay</Button>
  </Tooltip.Trigger>
  <Tooltip.Content>
    <p>Appears after 500ms</p>
  </Tooltip.Content>
</Tooltip.Root>

Anatomy

Components that make up Tooltip:

`Tooltip.Root`

The root container that manages tooltip state and coordinates all tooltip components.

Custom Props:

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`defaultOpen`	`boolean`	`false`	Default open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`delay`	`number`	`600`	Delay in milliseconds before showing tooltip

Inherited Props: Inherits all props from Base UI Tooltip.Root

`Tooltip.Trigger`

The element that triggers the tooltip on hover or focus.

Custom Props:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Inherited Props: Inherits all props from Base UI Tooltip.Trigger

`Tooltip.Content`

The tooltip popup content with arrow indicator.

Custom Props:

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	Which side to position the tooltip
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to the trigger
`sideOffset`	`number`	`8`	Distance in pixels from the trigger
`className`	`string`	-	Additional CSS classes

Inherited Props: Inherits all props from Base UI Tooltip.Popup

API Reference

See the Anatomy section above for detailed component props.

Tooltip

On this page