Tipsy is a jQuery plugin for creating tooltips.
HTML:
Include the jquery.tipsy styles file in your html page.
<link href="./css/jquery.tipsy.css" type="text/css" rel="stylesheet" />Include the jQuery library and jquery.tipsy script file in your html page.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="./js/jquery.tipsy.min.js"></script>Create an Element with title.
<a href="http://google.com" title="Simple Tooltip"></a>Javascript:
The plugin is named "tipsy" and can be applied to an element. You will probably also specify some options while applying the plugin.
$('a[title]').tipsy({
arrowWidth: 10, //arrow css border-width + margin-(left|right), default is 5 + 5
attr: 'data-tipsy', //default attributes for tipsy - data-tipsy-position | data-tipsy-offset | data-tipsy-disabled
cls: null, //tipsy custom class
duration: 150, //tipsy fadeIn, fadeOut duration
offset: 7, //tipsy offset from element
position: 'top-center', //tipsy position - top-left | top-center | top-right | bottom-left | bottom-center | bottom-right | left | right
trigger: 'hover', // how tooltip is triggered - hover | focus | click | manual
onShow: null, //onShow event
onHide: null //onHide event
})trgigger Options:
jQuery Manual Triggering. Works only when option trigger is 'manual':
- $('a[title]').tipsy("show");
- $('a[title]').tipsy("hide");
- $('a[title]').trigger("tipsy.show");
- $('a[title]').trigger("tipsy.hide");
attribute Options:
Form element attributes:
- data-title
- data-tipsy-disabled
- data-tipsy-position
- data-tipsy-offset
- On 'hover' trigger when element disappears, tipsy doesn't disappear too
Licensed under MIT license.