Lightweight Accessible Tooltip Plugin For jQuery

File Size: 4.71 KB
Views Total: 654
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight Accessible Tooltip Plugin For jQuery

A super tiny jQuery plugin that uses ARIA attributes to create simple, cross-platform, and fully accessible tooltips on hover or focus.

How to use it:

1. First ensure to include the tooltip.js script after you have jQuery library loaded.

<script src="//"></script>
<script src="js/tooltip.js"></script>

2. Add ARIA attributes to your links & elements like this:

  <span class="anchor-text" role="presentation">
    Hove Me

3. Create the tooltip content with the role="tooltip" attribute.

<div role="tooltip" id="tip" aria-hidden="true">
  Tooltio content

4. Call the plugin to enable the accessible tooltip.


5. The required CSS styles to show & hide the tooltip.

[role=tooltip][aria-hidden=true] {
  display: none;

[role=tooltip][aria-hidden=false] {
  display: block;

6. Style the tooltip whatever you like.

.anchor-text { border-bottom: 1px solid #333; }

[role=tooltip] {
  box-shadow: 1px 1px 0 0 lightgray;
  border:1px solid lightgray;
  background-color: floralwhite;
  position: absolute;
  z-index: 2;
  font-size: 1.7em;

[aria-haspopup=true] {
  background: url(assets/help.svg);
  background-repeat: no-repeat;
  -webkit-background-size: 0.8em 0.8em;
  background-size: 0.8em 0.8em;
  background-position: 0 50%;
  padding-left: 0.9em;
  margin-left: 0.1em;

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