Skip to main content
A tooltip component that displays contextual information when users hover or focus on an element.

​
Installation

npm install @kuzenbo/core

​
Usage

​
Basic Example

import { Tooltip, Button } from "@kuzenbo/core";

export default function TooltipExample() {
  return (
    <Tooltip>
      <Tooltip.Trigger render={<Button variant="outline" />}>
        Copy API key
      </Tooltip.Trigger>
      <Tooltip.Content>Copied to clipboard</Tooltip.Content>
    </Tooltip>
  );
}

​
Different Sides

import { Tooltip, Button } from "@kuzenbo/core";

export default function TooltipSides() {
  return (
    <div className="flex gap-4">
      <Tooltip>
        <Tooltip.Trigger render={<Button variant="outline" />}>
          Top
        </Tooltip.Trigger>
        <Tooltip.Content side="top">
          Tooltip on top
        </Tooltip.Content>
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger render={<Button variant="outline" />}>
          Bottom
        </Tooltip.Trigger>
        <Tooltip.Content side="bottom">
          Tooltip on bottom
        </Tooltip.Content>
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger render={<Button variant="outline" />}>
          Left
        </Tooltip.Trigger>
        <Tooltip.Content side="left">
          Tooltip on left
        </Tooltip.Content>
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger render={<Button variant="outline" />}>
          Right
        </Tooltip.Trigger>
        <Tooltip.Content side="right">
          Tooltip on right
        </Tooltip.Content>
      </Tooltip>
    </div>
  );
}

​
With Sizes

import { Tooltip, Button } from "@kuzenbo/core";

export default function TooltipSizes() {
  return (
    <div className="flex gap-2">
      <Tooltip size="xs">
        <Tooltip.Trigger render={<Button variant="outline" />}>
          XS
        </Tooltip.Trigger>
        <Tooltip.Content>Extra small tooltip</Tooltip.Content>
      </Tooltip>

      <Tooltip size="lg">
        <Tooltip.Trigger render={<Button variant="outline" />}>
          LG
        </Tooltip.Trigger>
        <Tooltip.Content>Large tooltip</Tooltip.Content>
      </Tooltip>
    </div>
  );
}

​
Composed Anatomy

import { Tooltip, Button } from "@kuzenbo/core";

export default function ComposedTooltip() {
  return (
    <Tooltip>
      <Tooltip.Trigger render={<Button variant="outline" />}>
        Hover me
      </Tooltip.Trigger>
      <Tooltip.Portal>
        <Tooltip.Positioner side="top" sideOffset={8}>
          <Tooltip.Popup>
            <Tooltip.Viewport>
              Custom tooltip with arrow
            </Tooltip.Viewport>
            <Tooltip.Arrow />
          </Tooltip.Popup>
        </Tooltip.Positioner>
      </Tooltip.Portal>
    </Tooltip>
  );
}

​
API Reference

​
Tooltip (Root)

​
defaultOpen
boolean
The initial open state when uncontrolled.
​
open
boolean
The controlled open state of the tooltip.
​
onOpenChange
(open: boolean) => void
Callback fired when the open state changes.
​
size
'xs' | 'sm' | 'md' | 'lg' | 'xl'
default:"'md'"
The size variant for the tooltip.
​
openDelay
number
The delay in milliseconds before the tooltip opens on hover.
​
closeDelay
number
The delay in milliseconds before the tooltip closes.

​
Tooltip.Content

​
side
'top' | 'right' | 'bottom' | 'left'
default:"'top'"
The preferred side of the trigger to render against.
​
sideOffset
number
default:"4"
The distance in pixels from the trigger.
​
align
'start' | 'center' | 'end'
default:"'center'"
The alignment of the tooltip relative to the trigger.
​
alignOffset
number
default:"0"
The offset in pixels from the alignment axis.
​
size
'xs' | 'sm' | 'md' | 'lg' | 'xl'
Override the root size for this content.
​
className
string
Additional CSS classes to apply.

​
Tooltip.Popup

​
size
'xs' | 'sm' | 'md' | 'lg' | 'xl'
Override the root size for this popup.
​
className
string
Additional CSS classes to apply.

​
Tooltip.Positioner

​
side
'top' | 'right' | 'bottom' | 'left'
The preferred side of the trigger to render against.
​
sideOffset
number
The distance in pixels from the trigger.
​
align
'start' | 'center' | 'end'
The alignment relative to the trigger.
​
alignOffset
number
The offset in pixels from the alignment axis.

​
Tooltip.Trigger

​
render
ReactElement
The element to render as the trigger.

​
Tooltip.Arrow

Renders a visual arrow pointing to the trigger. Automatically included in Tooltip.Content.

​
Component Parts

  • Tooltip - Root component that manages state and timing
  • Tooltip.Trigger - Opens the tooltip on hover/focus
  • Tooltip.Portal - Portals the tooltip content
  • Tooltip.Positioner - Positions the tooltip relative to trigger
  • Tooltip.Popup - The tooltip container
  • Tooltip.Viewport - Content viewport
  • Tooltip.Content - Convenience wrapper that includes Portal, Positioner, Popup, Viewport, and Arrow
  • Tooltip.Arrow - Visual arrow indicator
  • Tooltip.Provider - Provider for shared tooltip settings

​
Accessibility

  • Tooltip implements ARIA tooltip pattern
  • Automatically associates tooltip content with trigger using aria-describedby
  • Supports keyboard navigation (focus to show)
  • Supports hover and focus triggers
  • Tooltips are dismissed when pressing Escape
  • Content is announced to screen readers

Build docs developers (and LLMs) love

Get started for freeTalk to us