Tooltip

Open in GitHub

A small popup that appears when hovering over or focusing on an element.

Add to library

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
import { Tooltip, TooltipContent, TooltipTrigger } from '@bejamas/ui/components/tooltip';
4
---
5

6
<Tooltip>
7
  <TooltipTrigger asChild>
8
    <Button variant="outline">Hover</Button>
9
  </TooltipTrigger>
10
  <TooltipContent>
11
    <p>Add to library</p>
12
  </TooltipContent>
13
</Tooltip>

Installation

bunx bejamas add tooltip

npx bejamas add tooltip

pnpm dlx bejamas add tooltip

yarn dlx bejamas add tooltip

Usage

1
---
2
import { Tooltip, TooltipTrigger, TooltipContent } from '@bejamas/ui/components/tooltip';
3
import { Button } from '@bejamas/ui/components/button';
4
---
5

6
<Tooltip>
7
  <TooltipTrigger asChild>
8
    <Button variant="outline">Hover</Button>
9
  </TooltipTrigger>
10
  <TooltipContent>
11
    <p>Add to library</p>
12
  </TooltipContent>
13
</Tooltip>

Examples

With delay

This tooltip appears after 1000ms

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
import { Tooltip, TooltipContent, TooltipTrigger } from '@bejamas/ui/components/tooltip';
4
---
5

6
<Tooltip delay={1000}>
7
  <TooltipTrigger asChild>
8
    <Button variant="outline">Hover with delay</Button>
9
  </TooltipTrigger>
10
  <TooltipContent>
11
    <p>This tooltip appears after 1000ms</p>
12
  </TooltipContent>
13
</Tooltip>

Skip delay on subsequent tooltips

When a tooltip is shown, hovering over other tooltip triggers will show their tooltips immediately without delay. Try hovering over the first button, then quickly move to the others.

Bold (Ctrl+B)

Italic (Ctrl+I)

Underline (Ctrl+U)

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
import { Tooltip, TooltipContent, TooltipTrigger } from '@bejamas/ui/components/tooltip';
4
---
5

6
<div class="flex gap-2">
7
  <Tooltip delay={500}>
8
    <TooltipTrigger asChild>
9
      <Button variant="outline">Bold</Button>
10
    </TooltipTrigger>
11
    <TooltipContent>
12
      <p>Bold (Ctrl+B)</p>
13
    </TooltipContent>
14
  </Tooltip>
15
  <Tooltip delay={500}>
16
    <TooltipTrigger asChild>
17
      <Button variant="outline">Italic</Button>
18
    </TooltipTrigger>
19
    <TooltipContent>
20
      <p>Italic (Ctrl+I)</p>
21
    </TooltipContent>
22
  </Tooltip>
23
  <Tooltip delay={500}>
24
    <TooltipTrigger asChild>
25
      <Button variant="outline">Underline</Button>
26
    </TooltipTrigger>
27
    <TooltipContent>
28
      <p>Underline (Ctrl+U)</p>
29
    </TooltipContent>
30
  </Tooltip>
31
</div>

Different sides

Use the side prop to control which side the tooltip appears on.

Tooltip on left

Tooltip on top

Tooltip on bottom

Tooltip on right

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
import { Tooltip, TooltipContent, TooltipTrigger } from '@bejamas/ui/components/tooltip';
4
---
5

6
<div class="flex gap-4 items-center justify-center py-8">
7
  <Tooltip>
8
    <TooltipTrigger asChild>
9
      <Button variant="outline">Left</Button>
10
    </TooltipTrigger>
11
    <TooltipContent side="left">
12
      <p>Tooltip on left</p>
13
    </TooltipContent>
14
  </Tooltip>
15
  <Tooltip>
16
    <TooltipTrigger asChild>
17
      <Button variant="outline">Top</Button>
18
    </TooltipTrigger>
19
    <TooltipContent side="top">
20
      <p>Tooltip on top</p>
21
    </TooltipContent>
22
  </Tooltip>
23
  <Tooltip>
24
    <TooltipTrigger asChild>
25
      <Button variant="outline">Bottom</Button>
26
    </TooltipTrigger>
27
    <TooltipContent side="bottom">
28
      <p>Tooltip on bottom</p>
29
    </TooltipContent>
30
  </Tooltip>
31
  <Tooltip>
32
    <TooltipTrigger asChild>
33
      <Button variant="outline">Right</Button>
34
    </TooltipTrigger>
35
    <TooltipContent side="right">
36
      <p>Tooltip on right</p>
37
    </TooltipContent>
38
  </Tooltip>
39
</div>

Alignment options

Use the align prop to control how the tooltip aligns relative to the trigger.

Aligned to start

Aligned to center

Aligned to end

Aligned to start

Aligned to center

Aligned to end

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
import { Tooltip, TooltipContent, TooltipTrigger } from '@bejamas/ui/components/tooltip';
4
---
5

6
<div class="flex flex-col gap-4 items-center py-8">
7
  <div class="flex gap-4">
8
    <Tooltip>
9
      <TooltipTrigger asChild>
10
        <Button variant="outline">Top Start</Button>
11
      </TooltipTrigger>
12
      <TooltipContent side="top" align="start">
13
        <p>Aligned to start</p>
14
      </TooltipContent>
15
    </Tooltip>
16
    <Tooltip>
17
      <TooltipTrigger asChild>
18
        <Button variant="outline">Top Center</Button>
19
      </TooltipTrigger>
20
      <TooltipContent side="top" align="center">
21
        <p>Aligned to center</p>
22
      </TooltipContent>
23
    </Tooltip>
24
    <Tooltip>
25
      <TooltipTrigger asChild>
26
        <Button variant="outline">Top End</Button>
27
      </TooltipTrigger>
28
      <TooltipContent side="top" align="end">
29
        <p>Aligned to end</p>
30
      </TooltipContent>
31
    </Tooltip>
32
  </div>
33
  <div class="flex gap-4">
34
    <Tooltip>
35
      <TooltipTrigger asChild>
36
        <Button variant="outline">Bottom Start</Button>
37
      </TooltipTrigger>
38
      <TooltipContent side="bottom" align="start">
39
        <p>Aligned to start</p>
40
      </TooltipContent>
41
    </Tooltip>
42
    <Tooltip>
43
      <TooltipTrigger asChild>
44
        <Button variant="outline">Bottom Center</Button>
45
      </TooltipTrigger>
46
      <TooltipContent side="bottom" align="center">
47
        <p>Aligned to center</p>
48
      </TooltipContent>
49
    </Tooltip>
50
    <Tooltip>
51
      <TooltipTrigger asChild>
52
        <Button variant="outline">Bottom End</Button>
53
      </TooltipTrigger>
54
      <TooltipContent side="bottom" align="end">
55
        <p>Aligned to end</p>
56
      </TooltipContent>
57
    </Tooltip>
58
  </div>
59
</div>

Disabled

This feature is currently unavailable

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
import { Tooltip, TooltipContent, TooltipTrigger } from '@bejamas/ui/components/tooltip';
4
---
5

6
<Tooltip>
7
  <TooltipTrigger asChild>
8
    <Button variant="outline" disabled>Disabled</Button>
9
  </TooltipTrigger>
10
  <TooltipContent>
11
    <p>This feature is currently unavailable</p>
12
  </TooltipContent>
13
</Tooltip>

API Reference

Events

The tooltip emits custom events that you can listen to:

Event	Detail	Description
`tooltip:change`	`{ open: boolean, trigger: HTMLElement, content: HTMLElement, reason: string }`	Fired when visibility changes

1
<Tooltip id="my-tooltip">
2
  <TooltipTrigger asChild>
3
    <Button variant="outline">Hover me</Button>
4
  </TooltipTrigger>
5
  <TooltipContent>
6
    <p>Tooltip content</p>
7
  </TooltipContent>
8
</Tooltip>
9

10
<script>
11
  const tooltip = document.getElementById('my-tooltip');
12

13
  tooltip.addEventListener('tooltip:change', (e) => {
14
    console.log('Is open:', e.detail.open);
15
    console.log('Reason:', e.detail.reason);
16
  });
17
</script>

Programmatic Control

You can control the tooltip programmatically by dispatching a tooltip:set event:

const tooltip = document.getElementById('my-tooltip');

// Show the tooltip
tooltip.dispatchEvent(new CustomEvent('tooltip:set', {
  detail: { open: true }
}));

// Hide the tooltip
tooltip.dispatchEvent(new CustomEvent('tooltip:set', {
  detail: { open: false }
}));

Data Attributes

The tooltip sets these data attributes that you can use for styling or querying state:

Attribute	Element	Description
`data-state`	tooltip, tooltip-content	Current state (`open` or `closed`)
`data-side`	tooltip-content	Position relative to trigger (`top`, `right`, `bottom`, or `left`)
`data-align`	tooltip-content	Alignment (`start`, `center`, or `end`)