Skip to content

Briles/wingtip

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 

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'

About

DEPRECATED: Absurdly simple Javascript tooltips - Inspired by Tipsy

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published