The Tooltip component can be used in three forms:
- A standard hover tooltip over a link/button/text input;
- A hover tooltip over a non-focusable element (like a
<span>
, the JavaScript will make it accessible); - 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 compiled JavaScript from the component's dist directory 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
Classes
.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
Chrome | Latest |
---|---|
Firefox | Latest |
Edge | Latest |
Safari | Latest |
IE | 11 (Standalone only) |