EASY TOOLTIPS WITH TIPSY

While implementing the new extranet Keycode (soon online) I used “Tipsy” (jQuery plugin) a very useful library that allows to quickly create tooltips (hover box that appear on an item) .

All you need to do is:

1. include the two files jquery.tipsy.js and tipsy.css available at the following Repository GIT -> https://github.com/jaz303/tipsy/

2. Set either the jquery class or the jquery selector to the html object where you want to set the tip as follows:

Code:

<script type="text/javascript">
jQuery(document).ready(function() {
...
jQuery('.tooltip').tipsy({gravity: 's'}); ';
...
});
</script>

3- Set the attribute “title” to the html object to define the message that will appear in the tooltip:

Code:

<img src="/img/attiva.png" title="Attiva WebHat" />

Here the results in just a few steps!

Enjoy your tooltip!