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

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.

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.

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;
  }
  
}


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”. ;)