Back to components

Playground

Tooltip Component

Positions

Triggers

Complex Content

Usage Examples

Basic Tooltip

import { Tooltip } from "@/components/tooltip";
import { Button } from "@/components/button";

<Tooltip content="Tooltip text">
  <Button variant="outline">Hover me</Button>
</Tooltip>

Tooltip with Different Positions

<Tooltip content="Top tooltip" position="top">
  <button>Top</button>
</Tooltip>

<Tooltip content="Bottom tooltip" position="bottom">
  <button>Bottom</button>
</Tooltip>

<Tooltip content="Left tooltip" position="left">
  <button>Left</button>
</Tooltip>

<Tooltip content="Right tooltip" position="right">
  <button>Right</button>
</Tooltip>

Tooltip with Different Triggers

<Tooltip content="Hover tooltip (default)" trigger="hover">
  <button>Hover</button>
</Tooltip>

<Tooltip content="Click tooltip" trigger="click">
  <button>Click</button>
</Tooltip>

Tooltip with Complex Content

<Tooltip
  content={
    <div className="p-2">
      <p className="font-medium">Complex Tooltip</p>
      <p className="text-xs">This tooltip has multiple lines</p>
      <p className="text-xs">And complex content</p>
    </div>
  }
>
  <button>Complex Tooltip</button>
</Tooltip>