jQuery accessible simple tooltip, using ARIA

This jQuery plugin will provide you an accessible and simple non-modal tooltip, using ARIA.

<button class="js-simple-tooltip"
 data-simpletooltip-text="Cool, it works!">
  Hover or focus me to show the tooltip
</button>

<button class="js-simple-tooltip"
 data-simpletooltip-content-id="tooltip-case_1">
  Show me another tooltip
</button>
<div id="tooltip-case_1" class="hidden">Woot, you can take the content of a hidden block.</div>

Some informations about this script

Why it is accessible

• It relies on ARIA Design pattern for Tooltips;
• Thanks to aria-describedby and ids generated on the fly, you never loose any information.

You can close it using Esc.

How it works

Basically, the scripts wraps each class="js-simple-tooltip" into a span class="<your-prefix-class>-container" and adds the content into a hidden content next to it. Once you focus or hover the element with class="js-simple-tooltip", it is displayed.

You can use it on the tag you want (input, button, a…), example:

$('div').accessibleSimpleTooltipAria({
  simpletooltipText: title
});

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 (permission notice)

Last news

17th of July 2018: added data-simpletooltip-wrapper-tag and data-simpletooltip-tag attributes (to specify tags used for tooltip), as kindly discussed with @mh-nichts.

1st of December 2017: added a fix in case of an already existing attribute aria-describedby, as kindly requested by @jum44.

18th of April 2017: linted and reindented code properly.

15th of July 2016: thanks to dhoko’s fantastic work, this projet is a real jQuery plugin.

27th of June 2016: this plugin is available on bower, and you can install it with bower install jquery-accessible-simple-tooltip-aria.

7th of February 2016: this plugin is available on NPMjs.com, and you can install it with npm i jquery-accessible-simple-tooltip-aria.

Options and attributes

Use data-simpletooltip-text or data-simpletooltip-content-id attributes on an element to activate the tooltip.

• Simply put class="js-simpletooltip" on a button to activate the script.
• Attribute data-simpletooltip-prefix-class (non mandatory): the prefix to all style classes of the tooltip (useful to set up different styles).
• Attribute data-simpletooltip-text: the text of your tooltip.
• Attribute data-simpletooltip-content-id: the id of (hidden) content in your page that will be put into your tooltip.
• Attribute data-simpletooltip-wrapper-tag: the tag used for wrapping your tooltip (span by default).
• Attribute data-simpletooltip-tag: the tag used for your tooltip (span by default).

How to style it

Here are the styles used for this page:
(I’ve used no prefix class, data-simpletooltip-prefix-class="minimalist" and data-simpletooltip-prefix-class="minimalist-left" to position the tooltip on the left on some examples, you can set up your own styles)

/* Tooltip hidden by default */
.simpletooltip[aria-hidden="true"],
.minimalist-simpletooltip[aria-hidden="true"],
.minimalist-left-simpletooltip[aria-hidden="true"] {
  display: none;
}
/* position relative for containers */
.simpletooltip_container,
.minimalist-simpletooltip_container,
.minimalist-left-simpletooltip_container {
  position: relative;
  display: inline;
}

/* tooltip styles */
.simpletooltip, 
.minimalist-simpletooltip, 
.minimalist-left-simpletooltip {
  position: absolute;
  display: inline-block;
  z-index: 666;
  width: 10em;
  border-radius: .5em;
  background: rgba( 0, 0, 0, .9 );
  color: #eee;
  padding: .5em;
  text-align: left;
  line-height: 1.3;
}
.simpletooltip, 
.minimalist-simpletooltip {
  right: auto;
  left: 100%;
  margin-left: .5em;
}
.minimalist-left-simpletooltip {
  right: 100%;
  left: auto;
  margin-right: .5em;
}
/* used pseudo-element to make arrows */
.simpletooltip::before,
.minimalist-simpletooltip::before,
.minimalist-left-simpletooltip::before {
  content: '';
  speak: none;
  position: absolute;
  z-index: 666;
  width: 10px;
  height: 10px;
}
.simpletooltip::before,
.minimalist-simpletooltip::before {
  top: .5em;
  left: -10px;
  margin-left: -10px;
  border: 10px solid transparent;
  border-right: 10px solid rgba( 0, 0, 0, .9 );
}
.minimalist-left-simpletooltip::before {
  top: .5em;
  right: -10px;
  margin-right: -10px;
  border: 10px solid transparent;
  border-left: 10px solid rgba( 0, 0, 0, .9 )
}

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

/* for this example: mobile */
@media (max-width: 44.375em) {

  .simpletooltip, 
  .minimalist-simpletooltip,
  .minimalist-left-simpletooltip  {
    top: 100%;
    left: 50%;
	right: 0;
    margin: 0;
	margin-top: .7em;
	margin-left: -5em;
  }
  .simpletooltip::before, 
  .minimalist-simpletooltip::before,
  .minimalist-left-simpletooltip::before  {
    top: -10px;
	right: auto;
	left: 50%;
	margin-left: -5px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-bottom: 10px solid rgba( 0, 0, 0, .9 );
  }
  
}

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