Table of Contents
Tooltip dialog
A Tooltip dialog provides contextual information about a paired element. It either opens automatically or through user action.
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.0.0-next.26•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 |