# Tooltip **Category**: react **URL**: https://www.heroui.com/docs/react/components/tooltip **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(overlays)/tooltip.mdx > Displays informative text when users hover over or focus on an element *** ## Import ```tsx import { Tooltip } from '@heroui/react'; ``` ### Usage ```tsx import {CircleInfo} from "@gravity-ui/icons"; import {Button, Tooltip} from "@heroui/react"; export function TooltipBasic() { return (

This is a tooltip

More information
); } ``` ### Anatomy Import the Tooltip component and access all parts using dot notation. ```tsx import { Tooltip, Button } from '@heroui/react'; export default () => ( Helpful information about this element ) ``` ### With Arrow ```tsx import {Button, Tooltip} from "@heroui/react"; export function TooltipWithArrow() { return (

Tooltip with arrow indicator

Custom offset from trigger
); } ``` ### Placement ```tsx import {Button, Tooltip} from "@heroui/react"; export function TooltipPlacement() { return (

Top placement

Left placement
Hover buttons

Right placement

Bottom placement
); } ``` ### Custom Triggers ```tsx import {CircleCheckFill, CircleQuestion} from "@gravity-ui/icons"; import {Avatar, Chip, Tooltip} from "@heroui/react"; export function TooltipCustomTrigger() { return (
JD

Jane Doe

jane@example.com

 Active

Jane is currently online

Help Information

This is a helpful tooltip with more detailed information about this feature.

); } ``` ## Related Components - **Button**: Allows a user to perform an action - **Popover**: Displays content in context with a trigger ### Custom Render Function ```tsx "use client"; import {CircleInfo} from "@gravity-ui/icons"; import {Button, Tooltip} from "@heroui/react"; export function CustomRenderFunction() { return (
}>

This is a tooltip

}>

More information

); } ``` ## Styling ### Passing Tailwind CSS classes ```tsx import { Tooltip, Button } from '@heroui/react'; function CustomTooltip() { return (

Custom styled tooltip

 ); } ``` ### Customizing the component classes To customize the Tooltip component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes). ```css @layer components { .tooltip { @apply rounded-xl shadow-lg; } .tooltip__trigger { @apply cursor-help; } } ``` HeroUI follows the [BEM](https://getbem.com/) 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](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/tooltip.css)): #### 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` | - | 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` | - | Overrides the default DOM element with a custom render function.|