Accessible jQuery Tooltip Popup Plugin - tooltip

A really simple lightweight jQuery plugin that adds an accessible & CSS styleable tooltip popup to any element. Supports both on hover and on focus events.

How to use it:

1. Load the tooltip.js script after you have jQuery JavaScript library installed.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/tooltip.js"></script>

2. Create tooltip content for your element.

<div role="tooltip" id="demo" aria-hidden="true">
  Tooltip content goes here
</div>

3. Add a link to the target element and use aria-describedby to point to tooltip content you just created.

<a
   href="#"
   class="tooltip"
   aria-haspopup="true"
   aria-describedby="demo">
   <span role="presentation">Hover me</span>
</a>

4. Style the tooltip popup in your CSS.

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

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

[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;
}

5. Initialize the plugin on document ready.

$(document).ready(function() {
  $(".tooltip").tooltip();
});

---

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