Skip to main content
The @zendeskgarden/react-tooltips package provides a Tooltip component for showing supplemental information when a user hovers over or focuses on an element. All components require a ThemeProvider at the root of your application.

​
Installation

npm install @zendeskgarden/react-tooltips

# Peer dependencies
npm install react react-dom styled-components @zendeskgarden/react-theming

​
Tooltip

Tooltip wraps a single trigger element and shows a floating label on hover or focus. Pass the tooltip text or JSX via the content prop and place your trigger element as the child. The package also exports Tooltip.Title and Tooltip.Paragraph for structuring rich tooltip content.

​
Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Tooltip } from '@zendeskgarden/react-tooltips';

<ThemeProvider>
  <Tooltip content="Opens a new browser tab">
    <button>External link</button>
  </Tooltip>
</ThemeProvider>

​
Placement

Control where the tooltip appears relative to its trigger with the placement prop. 
<Tooltip content="Tooltip on top" placement="top">
  <button>Hover me</button>
</Tooltip>
The full set of placement values is: 'auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'.

​
Rich content

Use Tooltip.Title and Tooltip.Paragraph to build multi-line tooltip content. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Tooltip } from '@zendeskgarden/react-tooltips';

<ThemeProvider>
  <Tooltip
    size="large"
    content={
      <>
        <Tooltip.Title>Keyboard shortcut</Tooltip.Title>
        <Tooltip.Paragraph>Press Ctrl + S to save your work at any time.</Tooltip.Paragraph>
      </>
    }
  >
    <button>Save</button>
  </Tooltip>
</ThemeProvider>

​
Controlled visibility

Manage visibility externally using isVisible and isInitialVisible. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Tooltip } from '@zendeskgarden/react-tooltips';
import { useState } from 'react';

const [visible, setVisible] = useState(false);

<ThemeProvider>
  <Tooltip content="Controlled tooltip" isVisible={visible}>
    <button
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
    >
      Hover me
    </button>
  </Tooltip>
</ThemeProvider>

​
Tooltip props

​
body.content
ReactNode
required
The content rendered inside the tooltip. Accepts a string or JSX.
​
body.placement
string
default:"top"
The preferred placement of the tooltip relative to its trigger. Accepts 'auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', or 'start-bottom'.
​
body.size
string
default:"small"
Adjusts the padding and font size of the tooltip. Accepts 'small', 'medium', 'large', or 'extra-large'.
​
body.type
string
default:"dark"
Specifies the tooltip color scheme. Accepts 'dark' or 'light'.
​
body.hasArrow
boolean
Adds a directional arrow pointing to the trigger element.
​
body.delayMS
number
Adds a delay in milliseconds before the tooltip opens and closes.
​
body.isVisible
boolean
Controls tooltip visibility externally. When set, the component is in controlled mode.
​
body.isInitialVisible
boolean
Displays the tooltip on the initial render.
​
body.isLabel
boolean
Indicates the tooltip is the primary label for its trigger rather than a supplemental description. When true, the tooltip content is used as aria-label instead of aria-describedby.
​
body.fallbackPlacements
GardenPlacement[]
A list of fallback placements to try when the preferred placement has insufficient space.
​
body.zIndex
number | string
Sets the z-index of the tooltip.
​
body.appendToNode
Element
Appends the tooltip to the specified element instead of the default portal target.
​
body.refKey
string
Defines the ref key used to position the tooltip on the trigger element.
​
body.children
ReactElement
required
The trigger element. Must be a single React element.

Build docs developers (and LLMs) love

Get started for freeTalk to us