TipTop

Demo

Hover over me

Usage

Include the scripts and styles in your HTML head:

<link rel="stylesheet" href="tiptop.css" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="tiptop.js"></script>

Then simply add a title to any element you want to add TipTop to:

<a href="#alink" class="help" title="This is the tooltip content">
  A Link
</a>

Then simply hook up TipTop:

<script>
$(document).ready(function(){
    $('.help').tipTop();
});
</script>

Advanced

TipTop has two settings:

• offsetVertical - Vertical offset in px (defaults to 10)
• offsetHorizontal - Horizontal offset in px (defaults to 10)

Browser Compat

TipTop works in all modern browsers (Chrome, Firefox, Safari, Opera) and probably in IE8+.

Credits

TipTop was created by Gilbert Pellegrom from Dev7studios. Released under the MIT license.