Unobtrusive jQuery/Zepto tooltips
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
lib
LICENSE
README.md
demo.html
jquery.utip.js

README.md

utip

Unobstrusive tooltips jQuery/Zepto plugin.

Requirements

utip has no other requirements than jQuery/Zepto.

Installation

Include utip's CSS and jQuery/Zepto plugin.

<script type='text/javascript' src='jquery.utip.js'></script>
<link rel="stylesheet" href="utip.css" type="text/css" />

Markup

Specify a data-utip attribute on any DOM element you'd want a tooltip on, set to the tooltip's content, e.g.

<a href="#" data-utip="Hello, I'm a utip.">Tooltip</a>

You can also specify a data-utip-gravity on those elements to set the tooltip's direction, e.g.

<a href="#" data-utip="Hello, I'm a righty tooltip." data-utip-gravity="e">Tooltip</a>

data-utip-gravity can be set to nw | n | ne | e | se | s | sw | w

If you want to be able to hover on the tooltip, add a data-utip-hoverable attribute to the element, e.g.

<a href="#" data-utip="Hello, I'm a hoverable utip." data-utip-hoverable>Tooltip</a>

Usage

$(function(){
  $('a[data-utip]').utip();
});

Note: utip binds its event to $(document) rather than the elements themselves, making it possible to dynamically add or remove utip'ed elements that match the selector, or in this case, $('a[data-utip]').

License

This software is licensed under the MIT license.