Tooltip

Preview

Installation

npx shadcn@latest add @cubby-ui/tooltip

Usage

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/cubby-ui/tooltip";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger />
    <TooltipContent />
  </Tooltip>
</TooltipProvider>

Examples

With Button

Add tooltips to button elements.

Positions

Control tooltip placement around the trigger.

With Delay

Add custom delay before tooltip appears.

Icon Toolbar

Use tooltips in icon-only toolbars.

API Reference

The Tooltip component is built on top of Base UI's Tooltip. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Tooltip documentation.

Custom Props

TooltipContent

Modified Defaults

Our implementation changes the following Base UI prop defaults:

• TooltipTrigger: delay defaults to 0 (Base UI defaults to 600)
• TooltipTrigger: closeDelay defaults to 0 (Base UI defaults to 0 but we make it explicit)
• TooltipContent: side defaults to 'top' (Base UI defaults to 'top' but we make it explicit)
• TooltipContent: align defaults to 'center'
• TooltipContent: sideOffset defaults to 8 (Base UI defaults to 0)