Van11y accessible dialog tooltip (modal) system, using ARIA

This script will provide you an accessible dialog tooltip (modal) using ARIA.

The demo is here: https://van11y.net/downloads/modal-tooltip/demo/index.html

Website is here: https://van11y.net/accessible-modal-tooltip/

La page existe aussi en français : https://van11y.net/fr/tooltip-modal-accessible/

How it works

Basically, the script wraps each class="js-tooltip" into a span 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.
• Attribute data-tooltip-focus-toid: the id of the element in the modal tooltip you want to give the focus to, when loading the modal tooltip (closing button if not specified).

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 launcher source</div>:

van11yAccessibleModalTooltipAria(document.getElementById('newContent')[, addListeners]);

addListeners is a facultative boolean (by default set to true) to add modal tooltip listeners (should be set up only the first time in most of the cases).

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