Install the component dependency:
Include a React component in your project:
|visual style (from |
|DOM element => ()||react ref callback|
|positions a tail pointer (from |
|Event => ()||displays a close button, triggered on click|
Tooltips can appear automatically, or be triggered by hover, focus, tap or click.
Tooltips come in 2 styles. Defaults to
Tooltips can be shown with or without a tail (a directional indicator). To make the tail appear, use a
Tooltips may be persistent until a user interaction closes them. For a close button in the top-right corner of the tooltip, provide a
Tooltips should be written in sentence case.
Write your tooltips to be consice and scannable.
accent appearance to gain user attention in cases such onboarding, introducing functionality, asking for input, or prompting action. A good rule of thumb is
accent tooltips appear automatically, while basic tooltips appear as a user clicks or hovers to obtain more context.