Tooltip
Displays informative text when users hover over or focus on an element
Completeness: behavior-required
The stylesheet is only the visible half of this component. It also needs a keyboard
map, focus managed across more than one element, ARIA attributes that point at other
nodes, and [data-*] attributes that only running code sets — so a CSS-only port will
not reproduce it. Use @blakeui/react, or read the interaction contract from the MCP
server with get_component_behavior("Tooltip") and build the behaviour yourself.
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
import {Button, Tooltip} from "@blakeui/react";
export function TooltipPlacement() {
return (
<div className="grid grid-cols-3 gap-4">Custom Triggers
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. |
