Table of Contents
Tooltip modal
A Tooltip modal 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 Modal contains a header and a way to exit the experience.
Placement
A Tooltip modal component can contain a call-to-action, an icon, and a progress indicator.
There are 13 placement options available. The Tooltip Modal occupies the
top position by default. The auto placement chooses the position
with the most available space.
Configuration
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-modals
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { TooltipModal } from '@zendeskgarden/react-modals'
API
TooltipModal
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 | 'start' | 'end' | '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 |
popperModifiers | Modifier<any, any>[] | – | Modifies Popper instance to customize positioning logic |
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 |
TooltipModal.Body
Extends HTMLAttributes<HTMLDivElement>
TooltipModal.Close
Extends ButtonHTMLAttributes<HTMLButtonElement>
TooltipModal.Footer
Extends HTMLAttributes<HTMLDivElement>
TooltipModal.FooterItem
Extends HTMLAttributes<HTMLSpanElement>
TooltipModal.Title
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
tag | any | div | Updates the element's HTML tag |