Accessible jQuery Tooltip Popup Plugin - tooltip

File Size: 37.3 KB
Views Total: 983
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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

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

   <span role="presentation">Hover me</span>

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() {

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