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

File Size: 83.1 KB
Views Total: 2722
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


$ 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="//"></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.


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

  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

// hides the tooltip

// destroys the plugin

// removes all attributes

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;



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