Tooltip
Javascript requiredThe Tooltip component is a versatile user interface element that enhances the user experience by providing additional context and information when users interact with specific elements.
Introduction
The Tooltip component serves as a contextual aid, offering supplementary information when users hover over or focus on an element. It appears as a small pop-up box near the target element and can be positioned in various ways based on design preferences.
Visual representation
The following element is a visual representation of the tooltip component which would ideally be used within a form element.
To begin using tooltips, you only need to include the ` data-tooltip-target="{elementId}" ` data attribute within an element, where ` {elementId} ` refers to the ID of the corresponding tooltip component. Below is an example demonstrating a button that triggers the display of the tooltip-default element when hovered over or focused upon.
Code structure
The ` .aegov-tooltip ` class is placed on the wrapper element encompassing the tooltip.
<button data-tooltip-target="tooltip-default" type="button" class="aegov-btn">Default tooltip</button>
<div id="tooltip-default" role="tooltip" class="z-10 aegov-tooltip">
... Tooltop Label ...
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
This component depends on the use of JavaScript. The structure of code defined will work out-of-box if the bundled JavaScript library of AEGov-Design-System is utilized.
Using this JavaScript library is not mandatory. You may choose your preferred library as well, however you are required to style the component as per the example provided.
Variations
Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.
Triggering
The tooltip component offers flexibility in determining the triggering event that will display the tooltip. By default, the tooltip appears when the user hovers over the designated element. However, you can easily customize this behavior by using the ` data-tooltip-trigger="{hover|click}" ` data attributes. These attributes allow you to specify whether you want to show the tooltip when hovering over the element or when clicking on it. Let's delve into how you can make use of this variation:
Animation
To achieve smooth and eye-catching animations, you can combine the ` transition-opacity ` class along with the ` duration-{x} ` class, where {x} represents the desired duration value. Let's see how you can integrate these classes into your tooltip component:
Placement
The tooltip element can be controlled in terms of it's placement. The default position is top. By using the ` data-tooltip-placement="{top|right|bottom|left}" ` attribute on the trigger element, you can override the default behaviour and customize the placement of the tooltip.
Also, remember that an auto placement is applied by default on the tooltip along with top as the first choice. What this means is that if there is not enough space in the viewport for the tooltip to reveal itself, it will auto switch to bottom as the placement.
This feature is a fallback and will work by detecting the space in the viewport. The placement will switch only if the viewport does have more space on top.
Behaviour
The Tooltip appears when the user hovers over the target element or focuses on it, triggering the visibility of the supplementary information. When the mouse cursor moves away or the focus is lost, the Tooltip gracefully disappears, preventing any abrupt changes in the user interface.
Accessibility
Keyboard interactions are incorporated for accessibility, where 'Tab' to interacts with a tooltip, and 'hover or click' to show/hide the tooltip.
Accessibility is a crucial aspect of web development, and providing proper ARIA roles is essential to make the tooltip component more accessible to all users, including those using assistive technologies. Adding the ` role="tooltip" ` attribute will help screen readers identify the purpose of the element and convey its content to users. Here's the updated tooltip component with the ` role="tooltip" ` attribute included.
Usage
Tooltips are used to provide concise, context-aware information or guidance in various applications and interfaces.
Where to use a tooltip?
- In cases where government websites display data through charts or graphs, tooltips can offer detailed information when users hover over data points, providing context and statistics.
- Tooltips can offer accessibility tips and shortcuts, such as keyboard navigation instructions or instructions for screen reader users.
- Enhance navigation menus with tooltips to provide users with more information about menu items or links.
- In mapping applications, tooltips deliver information about geographic features, landmarks, or map layers, enriching the user's experience.
