Robust and accessible

  • It relies on a HTML5 structure (dialog) plus ARIA;
  • Keyboard navigation is supported, based on a mix between tooltip and ARIA Design pattern for Dialog Modal;
  • No inline CSS/JavaScript injected, your DOM stays clean, which is cool for responsive/CSP.

It’s (highly) customisable

  • You can style or animate it as you want;
  • You can create namespaces for generated classes if you need different modal tooltip styles in the same page;
  • Every aspect of the script can be customized, if you transpile the script into ES5, it will be IE9+ compatible.

Free and no license problem

  • No license problem: it uses MIT license, so it’s free, open-source and you can do whatever you want with it, including commercial use. This permission notice shall be included in all copies or substantial portions of it.
  • However, it is not prohibited to tell me that you’ve used it, or send me a little “thank you”. ;)

Lightweight

  • 19kb (development, readable by humans);
  • ~7kb (minified, readable by machines);
  • ~2kb minified and gzipped (readable by… mutants‽‽)

How it is working

Basically, the script 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. You can close it using Esc, or by using Enter or Space if you’re on the close button.

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

How to use it

Download the script

You may use npm command: npm i van11y-accessible-modal-tooltip-aria.
You may also use bower: bower install van11y-accessible-modal-tooltip-aria.

Option and attributes

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

  • Simply put class="js-tooltip" on a button to activate the script.
  • Attribute data-tooltip-prefix-class: the prefix to all style classes of the dialog tooltip.
  • Attribute data-tooltip-text: the text of your dialog tooltip (will be put into a p tag).
  • Attribute data-tooltip-content-id: the id of (hidden) content in your page that will be put into your dialog tooltip.
  • Attribute data-tooltip-title: the main title of the dialog tooltip.
  • Attribute data-tooltip-close-text: the text of the close button in your dialog tooltip.
  • Attribute data-tooltip-close-title: the title attribute of the close button in your dialog tooltip.
  • Attribute data-tooltip-close-img: a path to a valid image for the close button.

Remember there are some demos, it will be easier to understand: Demo of accessible modal tooltip

The script is launched when the page is loaded. If you need to execute it on AJAX-inserted content, you may use for example on <div id="newContent">your modal tooltip source</div>:

van11yAccessibleModalTooltipAria(document.getElementById('newContent'));

Minimal styling classes

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

/* needed for old browsers */
dialog {
  display: block;
  border: 0;
}
.hidden { display: none; }

.simple-left-container {
  position: relative;
}
 
.simple-left-tooltip {
  position: absolute;
  z-index: 666;
  top: 80%;
  left: 50%;
  width: 15em;
  background: #fff;
  background: rgba (255, 255, 255, .9);
  border: 1px solid #128197;
  border-radius: .5em;
  padding: 1em;
  text-align: left;
}

.simple-left-tooltip__title {
  margin: 0;
  line-height: 1;
}
.simple-left-tooltip p {
  font-size: 1em;
}
.simple-left-tooltip__close {
  float: right;
  border: 0;
  /** fix typo inputs **/
  font-family: inherit;
  font-size: .8em;
  background: #128197;
  color: #fff;
  border-radius: 1em;
}
.simple-left-tooltip__close:focus,
.simple-left-tooltip__close:hover,
.simple-left-tooltip__close:active {
  outline: 1px dotted #fff;  
}
.simple-left-tooltip__close:hover,
.simple-left-tooltip__close:active {
  background: #4d287f;
}

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

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

Other styling classes example

Here are the styles used for the demo “It’s easy to customize”, I’ve used data-tooltip-prefix-class="left-tooltip":

/* 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%;
  padding: .5em;
  font-size: 1em;
  border: 0;
  animation: fromleft .3s linear;
  background: #ddd; /* fallback IE9 */
  background-image:
      -webkit-linear-gradient(
        top,
        #128197 3em,
        #f7f7f7 3em
      );  background-image:
      linear-gradient(
        to bottom,
        #128197 3em,
        #f7f7f7 3em
      );
}
.left-tooltip-tooltip__close {
  float: right;
  background: transparent;
  color: #fff;
  border: 0;
}
.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; }
}

Other style example

Here are the styles used for the fourth example of the demo, I’ve used data-modal-prefix-class="fixed-tooltip" to namespace elements, so each one will start with .fixed-tooltip-:

.fixed-tooltip-tooltip {
  position: fixed;
  bottom: 3em;
  left: 3em;
  width: 13em;
  background: #fff;
  z-index: 700;
  border: 1px solid #128197;
  right: auto;
  padding: .5em;
}
.fixed-tooltip-tooltip__close {
  background: transparent;
  border: 0;
  font: inherit;
  float: right;
}
.fixed-tooltip-tooltip__title {
  margin: 0;
}