Tooltip

A popup that displays information related to an element on hover.

$ npx @beaket/ui add tooltip

Source

import { Button } from "@/components/ui/button";

import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";

const args = {};

const render = () => (
  <TooltipProvider>
    <Tooltip>
      <Tooltip.Trigger asChild>
        <Button variant="outline">Hover me</Button>
      </Tooltip.Trigger>
      <Tooltip.Content>
        <p>This is a tooltip</p>
      </Tooltip.Content>
    </Tooltip>
  </TooltipProvider>
);

export default function Example() {
  return <div className="flex h-full w-full items-center justify-center">{render()}</div>;
}

Examples

Default

On icon

Long text

Source

import { Button } from "@/components/ui/button";

import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";

export default () => (
  <TooltipProvider>
    <div className="flex flex-col gap-8 py-12">
      <div className="flex items-center gap-4">
        <span className="text-fg-muted w-24 text-sm">Default</span>
        <Tooltip>
          <Tooltip.Trigger asChild>
            <Button variant="outline">Hover</Button>
          </Tooltip.Trigger>
          <Tooltip.Content>Default tooltip</Tooltip.Content>
        </Tooltip>
      </div>

      <div className="flex items-center gap-4">
        <span className="text-fg-muted w-24 text-sm">On icon</span>
        <Tooltip>
          <Tooltip.Trigger asChild>
            <button
              className="border-border text-fg-muted hover:text-fg focus-visible:outline-border-focus inline-flex size-8 items-center justify-center border focus-visible:outline-2 focus-visible:outline-offset-2"
              aria-label="Help"
            >
              ?
            </button>
          </Tooltip.Trigger>
          <Tooltip.Content>Help information</Tooltip.Content>
        </Tooltip>
      </div>

      <div className="flex items-center gap-4">
        <span className="text-fg-muted w-24 text-sm">Long text</span>
        <Tooltip>
          <Tooltip.Trigger asChild>
            <Button variant="outline">Long tooltip</Button>
          </Tooltip.Trigger>
          <Tooltip.Content className="max-w-xs">
            This is a longer tooltip that demonstrates how the component handles more content.
          </Tooltip.Content>
        </Tooltip>
      </div>
    </div>
  </TooltipProvider>
);

Source

import { Button } from "@/components/ui/button";

import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";

const args = {};

const render = () => (
  <TooltipProvider>
    <div className="flex items-center justify-center gap-8 py-12">
      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Top</Button>
        </Tooltip.Trigger>
        <Tooltip.Content side="top">Tooltip on top</Tooltip.Content>
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Bottom</Button>
        </Tooltip.Trigger>
        <Tooltip.Content side="bottom">Tooltip on bottom</Tooltip.Content>
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Left</Button>
        </Tooltip.Trigger>
        <Tooltip.Content side="left">Tooltip on left</Tooltip.Content>
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Right</Button>
        </Tooltip.Trigger>
        <Tooltip.Content side="right">Tooltip on right</Tooltip.Content>
      </Tooltip>
    </div>
  </TooltipProvider>
);

export default function Example() {
  return render();
}

Props

Name	Type	Default	Description
delayDuration	number \| undefined	0	How long to wait, in milliseconds, before showing any tooltip inside this provider
delayDuration	number \| undefined	—	Overrides the enclosing `TooltipProvider` delay, in milliseconds, for this tooltip alone

Tooltip

Examples

All States

Positions

Props