Overview

Introduction

UsageComing soon

Theme

Layout

Box

ContainerComing soon

Flex

Grid

SectionComing soon

Typography

Components

BlockquoteComing soon

ComboboxComing soon

ZoomableComing soon

Formatting

CodeComing soon

EmComing soon

KbdComing soon

QuoteComing soon

StrongComing soon

Icons

Logo IconComing soon

Feature IconComing soon

Provider Icon

Icon Panel

Navigation

Page NavComing soon

Quick NavComing soon

Utilities

DS ProviderComing soon

Recipes

Copy Button

Copy Chip

Theme Toggle

Tooltip

Floating element that provides a control with contextual information via pointer or focus.

 <Tooltip content="Add to library">
  <IconButton>
    <PlusIcon />
  </IconButton>
</Tooltip>

API Reference

This component inherits and merges props from the Radix Tooltip primitive Root, Portal and Content parts. It supports common margin props.

Prop	Type	Default
`content`	`ReactNode`
`width`	`Responsive<string>`
`minWidth`	`Responsive<string>`
`maxWidth`	`Responsive<string>`
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`
`align`	`"start" \| "center" \| "end"`	`"center"`
`sideOffset`	`number`	`4`
`alignOffset`	`number`	`0`

Examples

Side positioning

Use the side prop to control which side of the trigger the tooltip appears on.

 <Flex gap="4" align="center" justify="between" width="100%">
  <Tooltip content="Top tooltip (default)" side="top">
    <Button size="1">Top</Button>
  </Tooltip>
  <Tooltip content="Right tooltip" side="right">
    <Button size="1">Right</Button>
  </Tooltip>
  <Tooltip content="Bottom tooltip" side="bottom">
    <Button size="1">Bottom</Button>
  </Tooltip>
  <Tooltip content="Left tooltip" side="left">
    <Button size="1">Left</Button>
  </Tooltip>
</Flex>

Alignment

Use the align prop to control how the tooltip aligns relative to the trigger.

 <Flex gap="4" align="center">
  <Tooltip content="Start aligned tooltip" side="bottom" align="start">
    <Button size="1">Start</Button>
  </Tooltip>
  <Tooltip
    content="Center aligned tooltip (default)"
    side="bottom"
    align="center"
  >
    <Button size="1">Center</Button>
  </Tooltip>
  <Tooltip content="End aligned tooltip" side="bottom" align="end">
    <Button size="1">End</Button>
  </Tooltip>
</Flex>

Offset positioning

Use sideOffset and alignOffset props to fine-tune tooltip positioning with pixel precision.

 <Flex gap="4" align="center">
  <Tooltip content="Default offset" side="top">
    <Button size="1">Default</Button>
  </Tooltip>
  <Tooltip content="Side offset: 15" side="top" sideOffset={15}>
    <Button size="1">Side offset</Button>
  </Tooltip>
  <Tooltip content="Align offset: -10" side="top" alignOffset={-10}>
    <Button size="1">Align offset</Button>
  </Tooltip>
  <Tooltip
    content="Both offsets combined"
    side="top"
    sideOffset={12}
    alignOffset={8}
  >
    <Button size="1">Combined</Button>
  </Tooltip>
</Flex>

Multi-line tooltip

Use the maxWidth prop to create tooltips that span multiple lines with longer descriptive content. This is ideal for providing detailed explanations or instructions.

 <Flex gap="4">
  <Tooltip
    content="This feature allows you to synchronize your user directory with external identity providers like Active Directory, Google Workspace, or Okta."
    maxWidth="300px"
    align="center"
  >
    <InfoCircledIcon />
  </Tooltip>
</Flex>

Different max widths

Control the width at which tooltips wrap text by adjusting the maxWidth prop.

 <Flex gap="4">
  <Tooltip
    content="This is a short tooltip that will wrap at 150px max width."
    maxWidth="150px"
    align="center"
  >
    <Button>150px max</Button>
  </Tooltip>

  <Tooltip
    content="This tooltip has more content and demonstrates how text wraps at different widths. It provides a good balance between readability and space efficiency."
    maxWidth="220px"
    align="center"
  >
    <Button>220px max</Button>
  </Tooltip>

  <Tooltip
    content="This tooltip has even more detailed content and shows how longer explanations can be presented in a readable format when you need to provide comprehensive information about a feature or action."
    maxWidth="320px"
    align="center"
  >
    <Button>320px max</Button>
  </Tooltip>

  <Tooltip content="This tooltip demonstrates the default behavior without a maxWidth constraint and will expand to fit content up to the natural line breaking points.">
    <Button>No max</Button>
  </Tooltip>
</Flex>