Tooltip

Installation

npx nuecrea-ui add tooltip

Usage

import { Button } from '@/components/ui/button';
import * as Tooltip from '@/components/ui/tooltip';

function Tip({
  label,
  tip,
  side,
  arrowPadding,
  disabled,
}: {
  label: string;
  tip: string;
  side?: 'top' | 'bottom' | 'left' | 'right';
  arrowPadding?: number;
  disabled?: boolean;
}) {
  return (
    <Tooltip.Root disabled={disabled}>
      <Tooltip.Trigger render={<Button variant="outline" size="sm" />}>
        {label}
      </Tooltip.Trigger>
      <Tooltip.Portal>
        <Tooltip.Positioner side={side} arrowPadding={arrowPadding}>
          <Tooltip.Popup>
            <Tooltip.Arrow />
            {tip}
          </Tooltip.Popup>
        </Tooltip.Positioner>
      </Tooltip.Portal>
    </Tooltip.Root>
  );
}

export default function TooltipStory() {
  return (
    <Tooltip.Provider>
      <main className="relative h-[520px]">
        {/* At the very top: side="top" has no room and flips to bottom. */}
        <div className="absolute top-0 left-40">
          <Tip label="Save" tip="Save (⌘S)" />
        </div>
        {/* A toolbar: once one tooltip has shown, the next opens without delay. */}
        <div className="absolute top-40 left-40 flex gap-2">
          <Tip label="Bold" tip="Bold (⌘B)" />
          <Tip label="Italic" tip="Italic (⌘I)" />
          <Tip label="Underline" tip="Underline (⌘U)" side="bottom" />
          <Tip label="Locked" tip="Not shown" disabled />
        </div>
        {/* Against the left edge with a large arrowPadding: the arrow is uncentered. */}
        <div className="absolute top-72 left-0">
          <Tip label="Help" tip="Keyboard shortcuts and docs" arrowPadding={70} />
        </div>
        {/* Room to scroll a trigger out of view (data-anchor-hidden). */}
        <div aria-hidden="true" className="absolute top-full h-[600px] w-px" />
      </main>
    </Tooltip.Provider>
  );
}

API reference