Tooltip

A "tooltip" is a non-modal (or non-blocking) overlay containing text-only content that provides supplemental information about an existing UI control. It is hidden by default, and becomes available on hover or focus of the control it describes. Sarah M. Higley came up with this definition for what a tooltip is in her article Tooltips in the time of WCAG 2.1, and its better than anything I could write, so I hope she doesn't mind me stealing it.

JavaScript tooltips

Recommended for new and existing work.

This solution described below is available as an NPM module. (Module installation instructions)

This solution can be styled exactly the want, appears on focus, and uses the maximum value of a z-index in the document. It will disappear when keyboard users press the Escape key. It doesn't work in mobile, which while consistent with other tooltip solutions, is something that I am still looking to fix. If anyone has any ideas, please feel to reach out to me on Twitter.

Native HTML Tooltips

Although this is a common method to make tooltips, I would advise using the JavaScript method instead.

This solution requires no JavaScript and is dead simple to implement. However, in general, you should be careful when using it:

• It only works for mouse users. Keyboard users don't see the tooltip.
• There is no way to style the tooltips with CSS or anything else. You are stuck with what the browser decides looks good.
• There is a small delay between the time the user hovers the item with the tooltip and when the tooltip appears. There isn't a way to adjust this delay.
• The tooltip inherits the z-index of element being hovered. If there are elements close by that have a higher stacking order, it will not appear as intended.

So should you not use title at all? There are places where developers may use it:

• For providing definitions to abbreviations using the <abbr> tag (However, Steve Faulkner suggests other methods for expanding abbreviations in a more user friendly way.
• For providing titles to iFrames (which has nothing to do with its tooltip functionality).

A really good round up of how the title attribute works, its history, and where it is appropriate to use it is in The Trials and Tribulations of the Title Attribute by Scott O'Hara

All of that said, here is a demo on how to make tooltips using title. It is not advised to use it.

Installation Instructions

You can load this JavaScript library into your application in serveral ways:

• as an ES6 module using Webpack.
• as a CommonJS module using require() and Webpack.
• as a native ES6 module within the browser.
• as an old-school ES4/JavaScript library.

If you haven't done so already, choosing which you should use is obviously a major architectural decision. Here are a few articles that will help you decide:

• Jan Olaf Krems gives a great overview of the JavaScript File Format Differences
• Joe Honton discusses that With ES Modules and HTTP/2 You May Not Need Webpack Anymore
• Stack Overflow has a really good thread about Webpack vs ES6 modules as well.

Important Note On The CSS Classes Used In This Module:

This module requires specific CSS class names to be used in order it to work correctly. These CSS classes begin with tooltip__. Please see the documentation above to see where these CSS classes are inserted.

Using NPM/Webpack to load ES6 Modules:

1. Install the enable-a11y NPM project.
2. Edit your webpack.config.json file to resolve the ~ modifier by adding the following:
   Wrap text

   ☜ Scroll to read full source ☞

   module.exports = { ... resolve: { extensions: ['.js', '.jsx', '.scss', '.css', '*.html'], modules: [ path.resolve('./src/js'), path.resolve('./node_modules') ], alias: { '~enable-a11y': path.resolve(__dirname, 'node_modules/enable-a11y') }, ... }, ... }
3. You can use the module like this:
   Wrap text

   ☜ Scroll to read full source ☞

   // import the JS module import tooltip from '~enable-a11y/js/modules/tooltip'; // import the CSS for the module import '~enable-a11y/css/tooltip'; // How to initialize the tooltip library tooltip.init(); // Note that this component will work with DOM elements coded like // the examples above added after page load. There is no need to call // an .add() method, like we do with the Enable combobox component.
4. Alternatively, if you are using LESS you can include the styles in your project's CSS using:
   Wrap text

   ☜ Scroll to read full source ☞

   @import '~enable-a11y/css/tooltip';
   (If you are using it in your CSS, you will have to add the .css suffix)

Using NPM/Webpack to Load Modules Using CommonJS Syntax

1. Install the enable-a11y NPM project.
2. You can import the module using require like this:
   Wrap text

   ☜ Scroll to read full source ☞

   var tooltip = require('enable-a11y/tooltip').default; ... tooltip.init();
3. You will have to include the CSS as well in your project's CSS using:
   Wrap text

   ☜ Scroll to read full source ☞

   @import '~enable-a11y/css/tooltip';

Using ES6 modules natively.

This is the method that this page you are reading now loads the scripts.

1. Grab the source by either using NPM, grabbing a ZIP file or cloning the enable source code from github.
2. If you want to load the module as a native ES6 module, copy js/modules/tooltip.js , and css/tooltip.css from the repo and put them in the appropriate directories in your project (all JS files must be in the same directory).
3. Load the CSS in the head of you document:
   Wrap text

   ☜ Scroll to read full source ☞

   <html> <head> ... <link rel="stylesheet" href="path-to/css/tooltip.css" > ... </head> <body> ... </body> </html>
4. Load your scripts using the follwing code (NOTE: you must use <script type="module">):
   Wrap text

   ☜ Scroll to read full source ☞

   <script type="module"> import tooltip from "path-to/tooltip.js" tooltip.init(); </script>

Using ES4