Responsive Accessible Tooltip Plugin For jQuery - aria-tooltip.js

aria-tooltip.js is a responsive, customizable, WAI-ARIA compliant jQuery tooltip plugin which can be attached to any DOM elements, with support for ARIA roles and keyboard interactions.

Installation:

# NPM
$ npm install bare-bones-slider

How to use it:

1. Include the required stylesheet aria-tooltip.css in the header, and the JavaScript file aria-tooltip.js after jQuery library but before the closing body tag.

<link rel="stylesheet" href="aria-tooltip.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="aria-tooltip.js"></script>

2. Add your tooltip content to an inline element with the CSS class 'tooltip' and a unique ID.

<span class="tooltip" id="myTooltip">Tooltip Content</span>

3. Add the CSS class 'has-tooltip' to target element where you want to append the tooltip to and then set the target element from which the plugin loads the tooltip content using the 'aria-describedby' attribute as this:

<span class="has-tooltip" aria-describedby="myTooltip">Hover Me</span>

4. That's it. Here is a list of default settings which can be used to customize the accessible tooltip.

$('.has-tooltip').ariaTooltip({

  // top, left, right, bottom, topLeft, topRight, bottomLeft, bottomRight screenTop, screenBottom.
  position: 'top', 

  // offset in px from element (does not apply id position is screenTop or screenBottom)
  tooltipOffsetX: 5, 

  // offset in px from element (does not apply id position is screenTop or screenBottom)
  tooltipOffsetY: 5, 
  
  tooltipModifierClass: 'tooltip_top',
  tooltipOpenClass: 'tooltip_open',
  
  focus: true,
  mouseover: true,
  responsive: false,
  fadeSpeed: 300,
  cssTransitions: false

});

5. Config the plugin to automatically adjust the tooltip's position depending on the current screen size.

$('.has-tooltip').ariaTooltip({
  responsive: [
    {
      breakpoint: 1,
      position: 'screenBottom',
      fadeSpeed: 100,
      modifierClass: 'tooltip_screen-bottom'
    },
    {
      breakpoint: 768,
      position: 'top',
      modifierClass: 'tooltip_top',
      translateY: -0.75
    },
    {
      breakpoint: 992,
      position: 'right',
      translateY: 0,
      fadeSpeed: 100,
      modifierClass: 'tooltip_right',
      translateX: 0.75
    }
  ]
});

6. API methods:

// shows the tooltip
$('.has-tooltip').ariaTooltip('show');

// hides the tooltip
$('.has-tooltip').ariaTooltip('hide');

// destroys the plugin
$('.has-tooltip').ariaTooltip('destroy');

// removes all attributes
$('.has-tooltip').ariaTooltip('remove');

7. You're also able to customize the tooltip in the aria-tooltip.scss as this:

$tooltipPadding: 0.5rem;
$tooltipMaxWidth: 10rem;
$tooltipColor: #fff;
$tooltipBackgroundColor: #cb6129;
$tooltipBorder: 0.1rem solid #ad5323;
$tooltipBorderRadius: 0.25rem;
$tooltipBoxShadow: 0.05rem 0.05rem 0.1rem 0.05rem rgba(127, 127, 127, 0.5);
$tooltipArrowSize: 0.8rem;

Changelog:

2018-10-20

• v2.3.0: updated dependencies

---

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