tooltips

An accessible tooltip component to help structure large amounts of content on a page.

The Tooltip component can be used in three forms:

  1. A standard hover tooltip over a link/button/text input;
  2. A hover tooltip over a non-focusable element (like a <span>, the JavaScript will make it accessible);
  3. A togglable tooltip (click to hide/show).

There are also delay and timing options available, however the default timing of 1 second mimics the title attribute timing (which was the previous WCAG standard; timing requirements have since been removed).

Examples

Usage

<!--
  A Tooltip with a span
-->
<span class="a11y-tip">
  <span class="a11y-tip__trigger">
    Tooltip Trigger span
  </span>
  <span class="a11y-tip__help">
    Tooltip content goes here
  </span>
</span><!--/.a11y-tip-->

<!--
  A Tooltip with a link
-->
<span class="a11y-tip a11y-tip--no-delay">
  <a href="#!" class="a11y-tip__trigger">
    Link w/top tooltip
  </a>

  <span class="a11y-tip__help a11y-tip__help--top">
    Activate this link to go somewhere!
  </span>
</span><!--/.a11y-tip-->

<!--
  A Tooltip with a button
-->
<span class="a11y-tip">
  <button type="button" class="a11y-tip__trigger" aria-describedby="tt_id">
    Button w/bottom tooltip
  </button>

  <span id="tt_id" role="tooltip" class="a11y-tip__help a11y-tip__help--bottom">
    Buttons do things on the page.
  </span>
</span><!--/.a11y-tip-->

<!--
  A Tooltip with an input
-->
<label for="test">
  Input with right tooltip
</label>
<span class="a11y-tip">
  <input id="test" placeholder="enter text" class="a11y-tip__trigger" aria-describedby="test_desc" type="text">
  <span id="test_desc" role="tooltip" class="a11y-tip__help a11y-tip__help--right">
    Enter something here. Text would be fine.
  </span>
</span><!--/.a11y-tip-->

<!--
  Click to show/hide tooltip
-->
<span class="a11y-tip a11y-tip--toggle">
  <span class="a11y-tip__trigger">
    Tooltip Toggle Trigger
  </span>

  <span class="a11y-tip__help">
    Tooltip content goes here
  </span>
</span><!--/.a11y-tip-->

					
@import "@10up/component-tooltip";

						
import Tooltip from '@10up/component-tooltip';

new Tooltip('.a11y-tip', () => {
  console.log( 'my awesome callback' );
} );

						
let tooltipInstance = new TenUp.tooltip('.a11y-tip');

* Standalone JS is used on projects that are not set up to handle ES6. To use this version you will need to download the UMD bundle from the NPM and pull it into your project. The same process should be followed with the CSS if it cannot process through the NPM package.

Documentation

Installation

This component accepts two arguments, the selector for the tooltip container and an optional callback function.

npm install @10up/component-tooltip --save

Methods

List of avaliable methods
destroy() Destroys the component, removing event listeners and any extra markup and attributes.

Classes

List of Classes used for this component
.a11y-tip Wrapping class for the component.
.a11y-tip__trigger Tooltip item trigger element.
.a11y-tip__help Tooltip content
.a11y-tip--no-delay Option to remove the delay
.a11y-tip__help--top Option to position the tooltip on top of the trigger.
.a11y-tip__help--right Option to position the tooltip on right of the trigger.
.a11y-tip__help--left Option to position the tooltip on left of the trigger.

Browser Compatibility

List of Browser Support for this component
Chrome Latest
Firefox Latest
Edge Latest
Safari Latest
IE 11 (Standalone only)

Resources