Tooltip

free

Tooltip adds short contextual hints to controls without changing the page layout.

import Button from '@/components/ui/button';
import Tooltip from '@/components/ui/tooltip';

export default function UsageDemo() {

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Tooltip

pnpm dlx nateui@latest add Tooltip

yarn dlx nateui@latest add Tooltip

Examples

Basic

import Tooltip from '@/components/ui/tooltip';

export default function BasicDemo() {
  return (

Placement

import Tooltip from '@/components/ui/tooltip';

const placements = [
  ['top-start', 'Top start'],

Custom Content

import { PiDownloadSimple } from 'react-icons/pi'
import Button from '@/components/ui/button';
import Tooltip from '@/components/ui/tooltip';

Default Open

import Tooltip from '@/components/ui/tooltip';

export default function DefaultOpenDemo() {
  return (

API

Tooltip wraps a trigger element and shows short contextual content on hover or focus. The floating layer is positioned by Floating UI and animated with Motion.

Prop	Description	Type	Default
`children`	Trigger content wrapped by the tooltip.	`ReactNode`	-
`className`	Class names applied to the floating tooltip content.	`string`	-
`disabled`	Prevents the tooltip from opening.	`boolean`	-
`open`	Initial open state for the tooltip.	`boolean`	`false`
`placement`	Side and alignment of the floating tooltip.	`TooltipPlacement`	`'top'`
`title`	Tooltip content. Required.	`string \| ReactNode`	-
`wrapperClass`	Class names applied to the trigger wrapper.	`string`	-
`...nativeProps`	Native props for the trigger wrapper span.	`ComponentProps<'span'>`	-

Types

type TooltipPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'right'
  | 'right-start'
  | 'right-end'
  | 'left'
  | 'left-start'
  | 'left-end';