On this page

Tooltip

A small popup that shows additional information on hover.

import { Tooltip } from "@ninna-ui/overlays";

pnpm add @ninna-ui/overlays@latest

Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the Tooltip component in your application.

import { Tooltip } from "@ninna-ui/overlays";
import { Button , Code } from "@ninna-ui/primitives";

export default function Example() {
  return (
    <Tooltip>
      <Tooltip.Trigger asChild>
        <Button variant="outline">Hover me</Button>
      </Tooltip.Trigger>
      <Tooltip.Content>Tooltip text</Tooltip.Content>
    </Tooltip>
  );
}

Basic

A simple tooltip that appears on hover.

Live preview/ Default

Placements

Position the tooltip on any side of the trigger element.

Live preview/ Default

With Arrow

Add an arrow pointer to visually connect the tooltip to its trigger.

Live preview/ Default

Custom Delay

Configure the delay before the tooltip appears.

Live preview/ Default

On Various Elements

Tooltips can be attached to buttons, text, icons, and any other element.

Live preview/ Default

Hover this text

API Reference

Complete list of props for the Tooltip component and its sub-components.

Tooltip (Root)

Prop	Type	Default	Description
`children`*	`ReactNode`	`—`	Tooltip content (Trigger, Content)
`open`	`boolean`	`—`	Controlled open state
`defaultOpen`	`boolean`	`false`	Default open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	`—`	Callback when open state changes
`delayDuration`	`number`	`200`	Delay in ms before showing the tooltip
`disableHoverableContent`	`boolean`	`false`	Whether to disable hoverable content

Tooltip.Content

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`	Which side to place the tooltip
`sideOffset`	`number`	`4`	Distance from trigger in pixels
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment along the side
`hasArrow`	`boolean`	`false`	Whether to show an arrow pointer
`avoidCollisions`	`boolean`	`true`	Whether to avoid collisions with viewport boundary
`className`	`string`	`—`	Additional CSS classes

Tooltip.Trigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element instead of wrapping button

Accessibility

Uses role="tooltip" for screen reader compatibility
Trigger is associated with content via aria-describedby
Tooltip appears on hover and focus for keyboard users
Escape key dismisses the tooltip
Configurable delay prevents accidental tooltip display