An accessible tooltip component to help structure large amounts of content on a page.
The Tooltip component can be used in three forms:
A standard hover tooltip over a link/button/text input;
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).
* 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.
This component accepts two arguments, the selector for the tooltip container and an optional callback function.
npm install @10up/component-tooltip --save
List of avaliable methods
Destroys the component, removing event listeners and any extra markup and attributes.
List of Classes used for this component
Wrapping class for the component.
Tooltip item trigger element.
Option to remove the delay
Option to position the tooltip on top of the trigger.
Option to position the tooltip on right of the trigger.
Option to position the tooltip on left of the trigger.