Tooltip

free

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

@floating-ui/reactmotion

Preview

Dark

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

export default function UsageDemo() {
  return (
    <Tooltip title="Exports the filtered view as CSV.">
      <Button>Export</Button>
    </Tooltip>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Tooltip

Examples

Basic

Preview

Dark

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

export default function BasicDemo() {
  return (
    <Tooltip title="Tooltip message">
      <span className="cursor-help rounded-control border border-border bg-control px-4 py-2 text-sm font-medium text-control-foreground">
        Hover me
      </span>
    </Tooltip>
  );
}

Placement

Preview

Dark

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

const placements = [
  ['top-start', 'Top start'],
  ['top', 'Top'],
  ['top-end', 'Top end'],
  ['left', 'Left'],
  ['right', 'Right'],
  ['bottom-start', 'Bottom start'],
  ['bottom', 'Bottom'],
  ['bottom-end', 'Bottom end'],
] as const;

const triggerClassName = [
  'block cursor-help rounded-control border border-border bg-control',
  'px-4 py-2 text-center text-sm font-medium text-control-foreground',
].join(' ');

export default function PlacementDemo() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-2 gap-4 sm:grid-cols-4">
      {placements.map(([placement, label]) => (
        <Tooltip key={placement} placement={placement} title={label}>
          <span className={triggerClassName}>
            {label}
          </span>
        </Tooltip>
      ))}
    </div>
  );
}

Custom Content

Preview

Dark

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

const keyClassName = [
  'rounded-control-sm bg-inverse-foreground/15 px-2 py-1',
  'text-xs leading-none text-inverse-foreground',
].join(' ');

const shortcutHint = (
  <span className="inline-flex items-center gap-2 text-xs font-semibold">
    <span>Clear selection</span>
    <kbd className={keyClassName}>Esc</kbd>
  </span>
);

export default function CustomContentDemo() {
  return (
    <div className="flex items-center gap-2">
      <Tooltip
        title={shortcutHint}
        className="rounded-control px-2 py-1"
      >
        <Button>Clear</Button>
      </Tooltip>
    </div>
  );
}

Default Open

Preview

Dark

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

export default function DefaultOpenDemo() {
  return (
    <Tooltip open placement="right" title="Visible on first render.">
      <span className="cursor-help rounded-control border border-border bg-control px-4 py-2 text-sm font-medium text-control-foreground">
        Default open
      </span>
    </Tooltip>
  );
}

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';