Overlays
Tooltip
Displays informative text when users hover over or focus on an element
Import
import { Tooltip } from '@blakeui/react';Usage
import {Button, Tooltip} from "@blakeui/react";
import {CircleInfo} from "@gravity-ui/icons";
export function TooltipBasic() {
return (Anatomy
Import the Tooltip component and access all parts using dot notation.
import { Tooltip, Button } from '@blakeui/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 "@blakeui/react";
export function TooltipWithArrow() {
return (
<div className="flex items-center gap-4">Placement
Hover buttons
import {Button, Tooltip} from "@blakeui/react";
export function TooltipPlacement() {
return (
<div className="grid grid-cols-3 gap-4">Custom Triggers
JD
Active
import {Avatar, Chip, Tooltip} from "@blakeui/react";
import {CircleCheckFill, CircleQuestion} from "@gravity-ui/icons";
export function TooltipCustomTrigger() {
return (Custom Render Function
"use client";
import {Button, Tooltip} from "@blakeui/react";
import {CircleInfo} from "@gravity-ui/icons";
Styling
Passing Tailwind CSS classes
import { Tooltip, Button } from '@blakeui/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.
A worked example is in Styling.
blakeUI 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 |
render | DOMRenderFunction<keyof React.JSX.IntrinsicElements, TooltipRenderProps> | - | Overrides the default DOM element with a custom render function. |
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 |
render | DOMRenderFunction<keyof React.JSX.IntrinsicElements, OverlayArrowRenderProps> | - | Overrides the default DOM element with a custom render function. |
