Heimerle + Meule Logo
Heimerle + Meule

Tooltip

Tooltips provide contextual information about an element when users hover, focus, or interact with it.

Quick Start

Use a Tooltip to provide additional context without permanently displaying supporting content.

1import {
2Tooltip,
3TooltipContent,
4TooltipTrigger,
5} from "@ecos/ui";
6
7<Tooltip>
8  <TooltipTrigger asChild>
9    <Button>Hover me</Button>
10  </TooltipTrigger>
11
12  <TooltipContent>
13    Additional information
14  </TooltipContent>
15</Tooltip>

Basic Tooltip

Display supporting information when a user hovers or focuses an element.

1<Tooltip>
2  <TooltipTrigger asChild>
3    <Button>Hover me</Button>
4  </TooltipTrigger>
5
6  <TooltipContent>
7    Additional information
8  </TooltipContent>
9</Tooltip>

Custom Trigger Elements

Tooltips can be attached to any interactive element using asChild.

1<Tooltip>
2  <TooltipTrigger asChild>
3    <Info />
4  </TooltipTrigger>
5
6  <TooltipContent>
7    More information
8  </TooltipContent>
9</Tooltip>

Positioning

Use the side prop to control where the tooltip appears relative to the trigger element.

1<Tooltip>
2  <TooltipTrigger asChild>
3    <Button>Top</Button>
4  </TooltipTrigger>
5  <TooltipContent side="top">
6    Appears above
7  </TooltipContent>
8</Tooltip>
9
10<Tooltip>
11  <TooltipTrigger asChild>
12    <Button>Right</Button>
13  </TooltipTrigger>
14  <TooltipContent side="right">
15    Appears to the right
16  </TooltipContent>
17</Tooltip>
18
19<Tooltip>
20  <TooltipTrigger asChild>
21    <Button>Bottom</Button>
22  </TooltipTrigger>
23  <TooltipContent side="bottom">
24    Appears below
25  </TooltipContent>
26</Tooltip>
27
28<Tooltip>
29  <TooltipTrigger asChild>
30    <Button>Left</Button>
31  </TooltipTrigger>
32  <TooltipContent side="left">
33    Appears to the left
34  </TooltipContent>
35</Tooltip>

Offset

Use sideOffset to adjust the spacing between the trigger and the tooltip.

1<Tooltip>
2  <TooltipTrigger asChild>
3    <Button>Hover me</Button>
4  </TooltipTrigger>
5
6  <TooltipContent sideOffset={12}>
7    Increased spacing
8  </TooltipContent>
9</Tooltip>

Without Arrow

Hide the tooltip arrow using the hideArrow prop.

1<Tooltip>
2  <TooltipTrigger asChild>
3    <Button>Hover me</Button>
4  </TooltipTrigger>
5
6  <TooltipContent hideArrow>
7    Tooltip without arrow
8  </TooltipContent>
9</Tooltip>

Custom Styling

Apply custom classes to modify the appearance of the tooltip.

1<Tooltip>
2  <TooltipTrigger asChild>
3    <Button>Hover me</Button>
4  </TooltipTrigger>
5
6  <TooltipContent 
7    className="bg-error text-error-foreground" 
8    arrowClassName="fill-error"
9  >
10    Custom styling
11  </TooltipContent>
12</Tooltip>

API Reference

Tooltip

Property

Type

Default

Description

defaultOpenbooleanfalseSets the initial open state when uncontrolled.
openboolean-Controls the open state of the tooltip.
onOpenChange(open: boolean) => void-Called when the open state changes.

TooltipTrigger

Property

Type

Default

Description

asChildbooleanfalseMerges trigger behavior into the child element.

TooltipContent

Property

Type

Default

Description

side"top" | "right" | "bottom" | "left""top"Determines the preferred placement of the tooltip.
sideOffsetnumber0Additional spacing between the trigger and tooltip.
hideArrowbooleanfalseHides the tooltip arrow.
classNamestring-Additional classes applied to the tooltip content.
arrowClassNamestring-Additional classes applied to the tooltip arrow.

Visual Reference

Configuration

Preview

Default
Right Placement
Without Arrow
Custom Offset
Custom Styling