Accessible jQuery Tooltip Popup Plugin - tooltip
File Size: | 37.3 KB |
---|---|
Views Total: | 990 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.