Frend's accessible, modern tooltip component.
permalink: /components/tooltip/ filename: tooltip title: Tooltip alpha: false sources:
A simple tooltip component usually consists of a button and a tooltip, with the button toggling the visible state of the tooltip when hovered or clicked on. By utilising a few relevant attributes we can improve the accessibility of the button and the tooltip.
aria-describedby are the key attributes to be added to the elements. The
role applies to the tooltip and describes “a contextual popup that displays a description for an element”. Its counterpart
aria-describedby defines the element that describes the relevant text (button), which in this case is the tooltip.
ESC key will close any open tooltips and clicking off either element will do the same. Tooltips are hidden using the
aria-hidden attribute to keep the accessibility tree and the DOM in sync.
button is initially rendered as a
Frtooltip is available to install with
npm. Run with the
--save flag to add the component your project dependencies.
npm install fr-tooltip --save
The component will then be available to
Functional styles for the tooltip (tooltip.css) that are required to display the component states correctly should be referenced via a
<link> in the
<head> of your document, or can be integrated into your existing stylesheet.
Tooltips rely on a pair of
<span>s defining both the toggle element and the tooltip.
ipsamTooltip describing ipsam
Assign the function invocation to a variable.
var myTooltip = ;
// remove all bindings and attributes when no longer neededmyTooltip;// re-initialise as neededmyTooltip;
var myTooltip =;