Tooltip Component
Contributed by Harrison
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Basic Tooltip Component (Right Tooltip)
Create a tooltip that appears when the user moves the mouse over an element. This tooltip text appears on the right direction.
Code Usage
Variables
Left Tooltip
The tooltip text appears on the left direction.
Code Usage
Top Tooltip
The tooltip text appears on the top direction.
Code Usage
Bottom Tooltip
The tooltip text appears on the bottom direction.
Code Usage
Disabled Tooltip
The disabled button with tooltip.
Code Usage
Animated Tooltip
The tooltip text with animation. Initially, the opacity of the tooltip text is set to 0, making it completely transparent and invisible. After one second (transition: opacity 1s), the tooltip text will change to opacity 1, making it fully visible.
Code Usage
Usability
Location of the tooltip
The tooltip should not be placed in the place that will obscure other important elements. It should be intrusive. USERWAY (opens in a new tab)
Limit Word Counts
Decrease the word count can provide user a more wonderful readable experience. If the word count is too large, we can distribute them into more tooltips. USERWAY (opens in a new tab)
Use tooltip arrows when multiple elements are nearby
Arrows can let users know which element belongs to that tooltip text. If no arrows, it can cause confusion for viewers. Nielsen Norman Group (opens in a new tab)
Use tooltips consistently throughout your site.
It's crucial to maintain consistency and offer tooltips for all of your design's components rather than just a select few. Use popup tips in place of further explanations for only part of the items. Nielsen Norman Group (opens in a new tab)
Accessibility
Focusable and Hoverable Tooltip
All users must be able to engage tooltip triggers, hence they must be focusable and hoverable. When a tooltip is displayed, TooltipTrigger automatically links the tooltip to the trigger element so that the tooltip's content describes it. React Spectrum (opens in a new tab)
Use contrasting colors
To guarantee that tooltips are the easiest for users of all skill levels to read against any background, there must be sufficient colour contrast. USERWAY (opens in a new tab)
Identify The Purpose Of Tooltip Component
These attributes provide accessible labels for screen readers and assistive technologies to describe the purpose or function of the elements to users with disabilities.
keyboard Interaction
The user can display the tooltip text by pressing Enter on the keyboard, and
press ESC to hide it. Many users, including some with visual or motor impairments,
rely on keyboard navigation and operation. Using the keyboard to trigger tooltips
allows these users to access additional information, improving accessibility.
Version
| Version | Editor | Author | Date | Description |
|---|---|---|---|---|
| v1.0 | Hsiangwen Cheng | Hsiangwen Cheng | 25.09.2023 | version 1 |
Tooltip Attributes
Here is a table describing some common attributes for the HTML tooltip component.
| Attribute | Description |
|---|---|
| title | The title attribute is a global attribute that can be added to HTML elements to provide supplementary information about an element. |
| data-tooltip | The data-tooltip attribute is a custom data attribute that can be used to store tooltip content for an element. |
| aria-label | The aria-label attribute is used to define a string that labels the current element, often used for accessibility to provide an accessible name. |
| aria-describedby | The aria-describedby attribute is used to reference the ID of another element that contains a description or explanation for the current element. |
| aria-haspopup | The aria-haspopup attribute is used to indicate that an element has a popup menu, tooltip, or dialog. |