Tooltip

Javascript required

The 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.

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.

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.

<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">
		tooltip default
		<div class="tooltip-arrow" data-popper-arrow></div>
	</div>

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 Javascript

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 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.

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:

<div class="flex gap-6">
	<!-- Show tooltip on hover -->
	<button data-tooltip-target="tooltip-hover" data-tooltip-trigger="hover" type="button" class="aegov-btn">Tooltip hover</button>
	<div id="tooltip-hover" role="tooltip" class="z-10 aegov-tooltip">
		Tooltip content
		<div class="tooltip-arrow" data-popper-arrow></div>
	</div>

	<!-- Show tooltip on click -->
	<button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" type="button" class="aegov-btn">Tooltip click</button>
	<div id="tooltip-click" role="tooltip" class="z-10 aegov-tooltip">
		Tooltip content
		<div class="tooltip-arrow" data-popper-arrow></div>
	</div>
	</div>

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:

<button data-tooltip-target="tooltip-animation" type="button" class="aegov-btn">Animated tooltip</button>
	<div id="tooltip-animation" role="tooltip" class="z-10 aegov-tooltip transition-all duration-500">
		Tooltip content
		<div class="tooltip-arrow" data-popper-arrow></div>
	</div>

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.

<div class="flex items-center gap-6 flex-wrap">
	<!-- Show tooltip on top -->
	<button data-tooltip-target="tooltip-top" data-tooltip-placement="top" type="button" class="aegov-btn">Tooltip top</button>
	<div id="tooltip-top" role="tooltip" class="z-10 aegov-tooltip">
		Tooltip on top
		<div class="tooltip-arrow" data-popper-arrow></div>
	</div>

	<!-- Show tooltip on right -->
	<button data-tooltip-target="tooltip-right" data-tooltip-placement="right" type="button" class="aegov-btn">Tooltip right</button>
	<div id="tooltip-right" role="tooltip" class="z-10 aegov-tooltip">
		Tooltip on right
		<div class="tooltip-arrow" data-popper-arrow></div>
	</div>

	<!-- Show tooltip on bottom -->
	<button data-tooltip-target="tooltip-bottom" data-tooltip-placement="bottom" type="button" class="aegov-btn">Tooltip bottom</button>
	<div id="tooltip-bottom" role="tooltip" class="z-10 aegov-tooltip">
		Tooltip on bottom
		<div class="tooltip-arrow" data-popper-arrow></div>
	</div>

	<!-- Show tooltip on left -->
	<button data-tooltip-target="tooltip-left" data-tooltip-placement="left" type="button" class="aegov-btn">Tooltip left</button>
	<div id="tooltip-left" role="tooltip" class="z-10 aegov-tooltip">
		Tooltip on left
		<div class="tooltip-arrow" data-popper-arrow></div>
	</div>	
	</div>

Replace the data attribute

With the above example, replace the ` data-tooltip-placement="bottom" ` value to control 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.

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.

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.

Tooltips are used to provide concise, context-aware information or guidance in various applications and interfaces.

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.

Tooltip

Introduction

Visual representation

Code structure

Variations

Triggering

Animation

Placement

Behaviour

Accessibility

Usage

Where to use a tooltip?

on this page