WAI-ARIA Compliant jQuery Dialog Window Plugin

This is a simple, accessible jQuery dialog window plugin for creating tooltip-like dialog windows with support for ARIA attributes and keyboard interactions. Based on the HTML <dialog> element.

Installation:

# NPM
$ npm install npm i jquery-accessible-dialog-tooltip-aria

# Bower
$ bower install npm i jquery-accessible-dialog-tooltip-aria

How to use it:

1. Insert the main JavaScript file jquery-accessible-dialog-tooltip-aria.js after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-accessible-dialog-tooltip-aria.js"></script>

2. Add the CSS class js-tooltip to the trigger button and config the dialog window using HTML5 data attributes as follows:

<button class="js-tooltip"
   data-tooltip-text="Hello world!"
   data-tooltip-title="Dialog Title"
   data-tooltip-close-text="Dismiss"
   data-tooltip-close-title="Close this dialog">
   Click me
</button>

3. HTML attributes:

• data-tooltip-text: dialog content
• data-tooltip-content-id: content ID of the dialog
• data-tooltip-title: dialog title
• data-tooltip-close-text: text for close button
• data-tooltip-close-title: title attribute of close button
• data-tooltip-close-img: image for close button

4. Style the dialog window in the CSS.

.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;
  font-family: inherit;
  font-size: 1em;
  background: #882525;
  color: #fff;
  border-radius: 1em;
}

Changelog:

2019-09-01

• Fix focus trap selector

2018-09-18

• Fix bug (avoid duplicate)

2018-03-21

• Add class <prefix>-tooltip__wrapper to container (role="document")

---

This awesome jQuery plugin is developed by nico3333fr. For more Advanced Usages, please check the demo page or visit the official website.