Usage

import { Tooltip } from '@heroui/react';

Anatomy

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>
)

Examples

Placement

Hover buttons

import {Button, Tooltip} from "@heroui/react";

export function TooltipPlacement() {
  return (
    <div className="grid grid-cols-3 gap-4">

With Arrow

import {Button, Tooltip} from "@heroui/react";

export function TooltipWithArrow() {
  return (
    <div className="flex items-center gap-4">

Custom Triggers

Active

import {CircleCheckFill, CircleQuestion} from "@gravity-ui/icons";
import {Avatar, Chip, Tooltip} from "@heroui/react"

Render Function

"use client";

import {CircleInfo} from "@gravity-ui/icons";
import {Button, Tooltip} from "@heroui/react";

Customization

Tailwind CSS

import {Button, Tooltip} from "@heroui/react";

export function CustomStyles() {
  return (
    <Tooltip delay={0}>

Global CSS

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;
  }
}

Styling Reference

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

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
`shouldSkipAnimation`	`boolean`	`false`	Whether to skip the enter and exit animations when moving quickly from one tooltip to another

Tooltip.Content

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

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Element that triggers the tooltip
`className`	`string`	-	Additional CSS classes

Tooltip.Arrow

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.