Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Kobalte

The Tooltip component is built on top of Kobalte Tooltip, which provides accessible hover, focus, and keyboard behavior.

1
import { Button } from "~/components/ui/button";
2
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
3

4
export default function TooltipDemo() {
5
  return (
6
    <Tooltip>
7
      <TooltipTrigger as={Button} variant="outline">
8
        Hover
9
      </TooltipTrigger>
10
      <TooltipContent>
11
        <p>Add to library</p>
12
      </TooltipContent>
13
    </Tooltip>
14
  );
15
}

Installation

Run the following command:

pnpm dlx shadcn@latest add @zaidan/tooltip
npx shadcn@latest add @zaidan/tooltip
yarn dlx shadcn@latest add @zaidan/tooltip
bunx --bun shadcn@latest add @zaidan/tooltip

Add the `TooltipProvider` to the root of your app.

1
import type { ParentProps } from "solid-js";
2
import { TooltipProvider } from "~/components/ui/tooltip";
3

4
export default function App(props: ParentProps) {
5
  return <TooltipProvider>{props.children}</TooltipProvider>;
6
}

Usage

1
import { Button } from "~/components/ui/button";
2
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";

1
<Tooltip>
2
  <TooltipTrigger as={Button} variant="outline">
3
    Hover
4
  </TooltipTrigger>
5
  <TooltipContent>
6
    <p>Add to library</p>
7
  </TooltipContent>
8
</Tooltip>

Composition

Use the following composition to build a Tooltip:

Tooltip
├── TooltipTrigger
└── TooltipContent

Side

Use the side prop to change the position of the tooltip.

1
import { For } from "solid-js";
2
import { Button } from "~/components/ui/button";
3
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
4

5
export default function TooltipSides() {
6
  return (
7
    <div class="flex flex-wrap gap-2">
8
      <For each={["left", "top", "bottom", "right"] as const}>
9
        {(side) => (
10
          <Tooltip>
11
            <TooltipTrigger as={Button} variant="outline" class="w-fit capitalize">
12
              {side}
13
            </TooltipTrigger>
14
            <TooltipContent side={side}>
15
              <p>Add to library</p>
16
            </TooltipContent>
17
          </Tooltip>
18
        )}
19
      </For>
20
    </div>
21
  );
22
}

With Keyboard Shortcut

1
import { SaveIcon } from "lucide-solid";
2
import { Button } from "~/components/ui/button";
3
import { Kbd } from "~/components/ui/kbd";
4
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
5

6
export default function TooltipKeyboard() {
7
  return (
8
    <Tooltip>
9
      <TooltipTrigger as={Button} variant="outline" size="icon-sm" aria-label="Save changes">
10
        <SaveIcon />
11
      </TooltipTrigger>
12
      <TooltipContent>
13
        Save Changes <Kbd>S</Kbd>
14
      </TooltipContent>
15
    </Tooltip>
16
  );
17
}

Disabled Button

Show a tooltip on a disabled button by wrapping it with a span.

1
import { Button } from "~/components/ui/button";
2
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
3

4
export default function TooltipDisabled() {
5
  return (
6
    <Tooltip>
7
      <TooltipTrigger as="span" class="inline-block w-fit">
8
        <Button variant="outline" disabled>
9
          Disabled
10
        </Button>
11
      </TooltipTrigger>
12
      <TooltipContent>
13
        <p>This feature is currently unavailable</p>
14
      </TooltipContent>
15
    </Tooltip>
16
  );
17
}

API Reference

See the Kobalte Tooltip API reference for primitive props, keyboard behavior, and accessibility details.