jQuery simple and accessible dialog tooltip window, using ARIA

Find/fork me on Github

Other accessible plugins

This jQuery plugin will provide you a shiny and accessible dialog tooltip window, using ARIA.

First simple example

<button class="js-tooltip"
 data-tooltip-text="Hello world!"
 data-tooltip-title="Title"
 data-tooltip-close-text="Close"
 data-tooltip-close-title="Close this window">
  Show me a dialog tooltip window
</button>

Second simple example

<button class="js-tooltip"
 data-tooltip-content-id="tooltip_id_2nd_example"
 data-tooltip-title="Title for your tooltip"
 data-tooltip-close-text="Close it"
 data-tooltip-close-title="Close it, really">
  Show me another dialog tooltip window
</button>
<div id="tooltip_id_2nd_example" class="hidden">Woot, you can take the content of a hidden <code>div</code>.</div>

Last news

1st of September, 2019: as kindly spotted by @twikito for the modal, the focus trap had a bug with some input type="hidden", it is fixed also on this project.

18th of September, 2018: when using data-tooltip-content-id, if there was an id in this content, it was duplicated (which can create a lot of issues, in forms, etc.). It is fixed.

21st of March, 2018: added a class on tooltip container div role="document" class="<your-prefix-class>-tooltip__wrapper"), for enabling styling this wrapper (if needed).

18th of August, 2017: fixed an issue on VoiceOver/Mac, as kindly reported by @mdparker26, and with great help of @goetsu, @johan_ramon and @romaingervois.

7th of April, 2017: added possibility to close the tooltip by clicking on its opener. Linted and reindented code.

24th of March, 2017: added aria-modal="true" to dialog element, as kindly suggested by @johan_ramon.

Some informations about this script

Why it is keyboard-friendly

When you open this dialog tooltip with keyboard:

  1. You know that you are in a modal dialog tooltip (thanks to dialog tag and focus management);
  2. You stay in this modal dialog tooltip, you can’t tabulate outside of it until you close it;
  3. When you close it, you’re taken back to the place you were when you opened it.

You can close it using Esc, or by using Enter or Space if you’re on the close button (or click outside of it).

How it works

Basically, the scripts wraps each class="js-tooltip" into a span class="<your-prefix-class>-container", when you activate one, it inserts a dialog element just after the clicked element (in the container), puts the focus on it and traps focus in the dialog tooltip. When you exit it, the focus is given back to the element that opened it.

For mouse users, they can click outside the dialog tooltip to close it.

If you never activate a dialog tooltip, it won’t be anywhere in the code.

Options and attributes

Use data-tooltip-text or data-tooltip-content-id attributes to insert content in the dialog tooltip window.

Another feature: when you click on a button that launches a modal tooltip, the class is-active is added to this button.

How to style it

Here are the styles used for this page:
(I’ve used data-tooltip-prefix-class="simple-tooltip", you can set up your own styles)

/* it will work better with this box-sizing, you may adapt it to your needs */
/*html { box-sizing: border-box; }
*, *:before, *:after {
  box-sizing: inherit;
}*/

.simple-tooltip-container {
  position: relative;
}
 
.simple-tooltip-tooltip {
  position: absolute;
  z-index: 666;
  top: 50%;
  left: 50%;
  width: 15em;
  
  background: #fff;
  background: rgba (255, 255, 255, .9);
  border: 1px solid #882525;
  border-radius: .5em;
  padding: 1em;
  text-align: left;
}
.simple-tooltip-tooltip__title {
  margin: 0;
  line-height: 1;
}
.simple-tooltip-tooltip p {
  font-size: 1em;
}
.simple-tooltip-tooltip__close {
  float: right;
  /** fix typo inputs **/
  font-family: inherit;
  font-size: 1em;
  background: #882525;
  color: #fff;
  border-radius: 1em;
}

/* it can be easily adapted in media-queries for tablets/mobile */

/* for this example: tablets */
@media (max-width: 55.625em) {

  .simple-tooltip-container {
    position: static;
	
  }
  .simple-tooltip-tooltip {
    position: static;
	  width: auto;
	  margin-top: 1em;
  }
  
}

/* another example (“it’s customisable” button) */
/* tooltip modal */
.left-tooltip-tooltip {
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  z-index: 667;
  position: fixed;
  width: 25em;
  max-width: 100%;
  background: #f00;
  padding: .5em;
  font-size: 1em;
  border: 0;
  animation: fromleft .3s linear;
  background-image:
      -webkit-linear-gradient(
        top,
        #882525 3em,
        #f7f7f7 3em
      );
  background-image:
      linear-gradient(
        to bottom,
        #882525 3em,
        #f7f7f7 3em
      );
  
}
.left-tooltip-tooltip__close {
  float: right;
  background: transparent;
  color: #fff;
}
.left-tooltip-tooltip__title {
  font-size: 1.2em;
  margin: 0;
  color: #fff;
  font-weight: normal;
}

@-webkit-keyframes fromleft {
  0%   { width: 0; }
  100% { width: 25em; }
}
@keyframes fromleft {
  0%   { width: 0; }
  100% { width: 25em; }
}

As explained above, this permission notice shall be included in all copies or substantial portions of it.

As usual, it is not prohibited to tell me that you’ve used it, or send me a little “thank you”. ;)

Older updates

14th of March, 2017: added attributedata-tooltip-close-img to insert an image in close button, added a wrapper for close button text span class="<your-prefix-class>-tooltip__closetext__container" in order to make it stylable, added another example (see button “It’s customisable” below, including styles to make it work), and added mention of the class is-active added to the element that launches a modal tooltip.

9th of March, 2017: added attribute type="button" to button, to avoid problems in SharePoint or in forms.

2nd of November, 2016: this plugin is available on Bower bower install jquery-accessible-dialog-tooltip-aria.
Added attribute open to dialog, as suggested by @samrichca.

19th of January, 2016: this plugin is available on NPMjs.com.

11th of November, 2015: fixed a small issue when attribute data-tooltip-prefix-class is omitted.

26th of June, 2015: fixed a bug in Chrome.