Skip to main contentSkip to sidebarSkip to headerSkip to footer

Tooltip

A pop-up that displays information when a user hovers over an element.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
import { Tooltip, TooltipContent, TooltipTrigger } from "passport-ui";
import { Button } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>This is a tooltip</TooltipContent>
</Tooltip>
 
{/* Different positions */}
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Top</Button>
  </TooltipTrigger>
  <TooltipContent side="top">Tooltip on top</TooltipContent>
</Tooltip>
 
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Bottom</Button>
  </TooltipTrigger>
  <TooltipContent side="bottom">Tooltip on bottom</TooltipContent>
</Tooltip>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗