DEPRECATED: Absurdly simple Javascript tooltips - Inspired by Tipsy
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
.gitignore
LICENSE
env.html
readme.md
splash.png

readme.md

wingtip.js is no longer being developed. Such a simple implementation is possible using only CSS.

wingtip.js.

Absurdly simple javascript tooltips.

wingtip.js splash

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+


Usage

  1. In your HTML, load wingtip.min.css and wingtip.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 of n, 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>
  2. 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'