JSPM – jquery-accessible-simple-tooltip-aria@2.3.0

Package Exports

jquery-accessible-simple-tooltip-aria

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jquery-accessible-simple-tooltip-aria) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Installation

You can download and install the plugin via:

npm: $ npm i jquery-accessible-simple-tooltip-aria
bower: $ bower install jquery-accessible-simple-tooltip-aria

Demo

The demo is here: https://a11y.nicolas-hoffmann.net/simple-tooltip/

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

Default

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…)

jQuery Plugin

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

License

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)

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

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

/* 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 );
  }

}

examples

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

Enjoy.

jquery-accessible-simple-tooltip-aria