Table of Contents

Tooltip dialog

A Tooltip dialog provides contextual information about a paired element. It either opens automatically or through user action.

Table of Contents

How to use it
- Default
- Placement
Configuration
API
- TooltipDialog

Used for this

To enable user action within a tooltip
To provide a focus loop when actions need to be inside a tooltip

Not for this

To reveal read-only helpful information about an element on hover, use a Tooltip

How to use it

Default

A Tooltip Dialog contains a header and a way to exit the experience.

Placement

A Tooltip dialog component can contain a call-to-action, an icon, and a progress indicator.

There are 13 placement options available. The Tooltip Dialog occupies the top position by default. The auto placement chooses the position with the most available space.

Configuration

Name9.1.0•View source•View on npm
Installnpm install @zendeskgarden/react-modals
Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
Importimport { TooltipDialog } from '@zendeskgarden/react-modals'

API

TooltipDialog

Extends HTMLAttributes<HTMLDivElement>

Prop name	Type	Default	Description
appendToNode	Element		Defines the DOM element that the modal will attatch to
backdropProps	HTMLAttributes<HTMLDivElement>		Passes HTML attributes to the backdrop element
focusOnMount	boolean	true	Directs keyboard focus to the modal on mount
hasArrow	boolean	true	Adds an arrow to the tooltop
isAnimated	boolean		Animates the modal
onClose			Handles close actions. Can be triggered from the backdrop and from the close icon. Parameters `event` The DOM event that triggered the close action
placement	'end' \| 'start' \| 'auto' \| 'top' \| 'bottom' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'end-top' \| 'end-bottom' \| 'start-top' \| 'start-bottom'	'auto'	Adjusts the placement of the tooltip
referenceElement	HTMLElement \| null		Positions the modal relative to the provided `HTMLElement`
restoreFocus	boolean	true	Returns keyboard focus to the element that triggered the modal
zIndex	number		Sets the `z-index` of the tooltip

TooltipDialog.Body

Extends HTMLAttributes<HTMLDivElement>

TooltipDialog.Close

Extends ButtonHTMLAttributes<HTMLButtonElement>

TooltipDialog.Footer

Extends HTMLAttributes<HTMLDivElement>

TooltipDialog.FooterItem

Extends HTMLAttributes<HTMLSpanElement>

TooltipDialog.Title

Extends HTMLAttributes<HTMLDivElement>

Prop name	Type	Default	Description
tag	any	div	Updates the element's HTML tag