Tooltip

A small popup that shows additional information on hover.

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

pnpm add @ninna-ui/overlays

Requires @ninna-ui/core (auto-installed) + CSS setup.

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.

Placements

Position the tooltip on any side of the trigger element.

With Arrow

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

Custom Delay

Configure the delay before the tooltip appears.

On Various Elements

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

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