Tooltip
Displays informative text when users hover over or focus on an element
Import
import { Tooltip } from '@heroui/react';Usage
import {CircleInfo} from "@gravity-ui/icons";
import {Button, Tooltip} from "@heroui/react";
export function TooltipBasic() {
return (Anatomy
Import the Tooltip component and access all parts using dot notation.
import { Tooltip, Button } from '@heroui/react';
export default () => (
<Tooltip>
<Tooltip.Trigger>
<Button>Hover for tooltip</Button>
</Tooltip.Trigger>
<Tooltip.Content>
<Tooltip.Arrow />
Helpful information about this element
</Tooltip.Content>
</Tooltip>
)With Arrow
import {Button, Tooltip} from "@heroui/react";
export function TooltipWithArrow() {
return (
<div className="flex items-center gap-4">Placement
Hover buttons
import {Button, Tooltip} from "@heroui/react";
export function TooltipPlacement() {
return (
<div className="grid grid-cols-3 gap-4">Custom Triggers
JD
Active
import {CircleCheckFill, CircleQuestion} from "@gravity-ui/icons";
import {Avatar, Chip, Tooltip} from "@heroui/react";
export function TooltipCustomTrigger() {
return (Styling
Passing Tailwind CSS classes
import { Tooltip, Button } from '@heroui/react';
function CustomTooltip() {
return (
<Tooltip>
<Tooltip.Trigger>
<Button>Hover me</Button>
</Tooltip.Trigger>
<Tooltip.Content className="bg-accent text-accent-foreground">
<p>Custom styled tooltip</p>
</Tooltip.Content>
</Tooltip>
);
}Customizing the component classes
To customize the Tooltip component classes, you can use the @layer components directive.
Learn more.
@layer components {
.tooltip {
@apply rounded-xl shadow-lg;
}
.tooltip__trigger {
@apply cursor-help;
}
}HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.
CSS Classes
The Tooltip component uses these CSS classes (View source styles):
Base Classes
.tooltip- Base tooltip styles with animations.tooltip__trigger- Trigger element styles
Interactive States
The component supports animation states:
- Entering:
[data-entering]- Applied during tooltip appearance - Exiting:
[data-exiting]- Applied during tooltip disappearance - Placement:
[data-placement="*"]- Applied based on tooltip position
API Reference
Tooltip Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Trigger element and content |
delay | number | 700 | Delay in milliseconds before showing tooltip |
closeDelay | number | 0 | Delay in milliseconds before hiding tooltip |
trigger | "hover" | "focus" | "hover" | How the tooltip is triggered |
isDisabled | boolean | false | Whether the tooltip is disabled |
Tooltip.Content Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Content to display in the tooltip |
showArrow | boolean | false | Whether to show the arrow indicator |
offset | number | 3 (7 with arrow) | Distance from the trigger element |
placement | "top" | "bottom" | "left" | "right" (and variants) | "top" | Placement of the tooltip |
className | string | - | Additional CSS classes |
Tooltip.Trigger Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Element that triggers the tooltip |
className | string | - | Additional CSS classes |
Tooltip.Arrow Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Custom arrow element |
className | string | - | Additional CSS classes |
