wingtip.js is no longer being developed. Such a simple implementation is possible using only CSS.
wingtip.js is a pure javascript plugin for displaying simple tooltips. Inspired by Tipsy. Supports IE8+, Chrome 4+, Firefox 3.5+, Opera 10.0+, Safari 3.1+
-
In your HTML, load
wingtip.min.css
andwingtip.min.js
as such<link rel="stylesheet" href="wingtip.min.css"> <script src="wingtip.min.js"></script>
create some tooltipped elements that have:
- the class
js-wingtip
- a data attribute
wingtip
with a value ofn, s, e, w, ne, nw, se, or sw
; the direction of the tooltip - a second attribute that contains the tooltip's content, I like to use the
title
attribute. You can choose any attribute you want, simply set it in the options
e.g.:
<a href="#!" class="js-wingtip" data-wingtip="n" title="I'm a northerly tooltip!">I'm tooltipped, yo!</a>
- the class
-
In your Javascript, call the
wingtip
function after the DOM is ready.
// IE9+
document.addEventListener('DOMContentLoaded', function() {
// call wingtip with default options
wingtip();
// or set some wingtip options
wingtip(options = {
offset: 5,
title: 'aria-label'
});
});
#####Options
Option | Description | Default Value |
---|---|---|
offset | the distance in pixels the tooltip is offset from the calling element | 0 |
title | the attribute from which the tooltip's text content is retrieved | 'title' |