Tooltipsy – The Smartest jQuery Tooltip Plugin

Tooltipsy – The Smartest jQuery Tooltip Plugin

Tooltipsy is an ultra simple jQuery tool tip plugin I had ever seen. The plugin is designed in a way to easily control the CSS, which I think is quite difficult with other tool tip plugin that I have seen. To be frank, I was impressed with @briancray work in making Tooltipsy with great control over CSS in such a easy way. In addition to that, users can add nice animations to the tooltip without bricking your head to make it work.

So, if your planning to use a tooltip for your blog or a website, I do recommend everyone to give a try for Tooltipsy.

How it works

Step 1: Download Tooltipsy and upload it to your own server. After download link the path of the Tooltipsy inside the script and include it in your HTML or whatever you use.

<script type="text/javascript" src="/js/tooltipsy.min.js"></script>

Step 2:
Add the CSS to brush up the tooltip design. You can change it to different shapes and colors upon your interest and place it in the main stylesheet

.tooltipsy
{
    padding: 10px;
    max-width: 200px;
    color: #303030;
    background-color: #f5f5b5;
    border: 1px solid #deca7e;
}

Step 3: Now finally add the title attribute to let it work

<a class="hastip" title="Show me">
<a class="hastip" title="Me too">

<script type="text/javascript">
$('.hastip').tooltipsy();
</script>

Isn’t this easy to add a tooltip? Yes, it is.
If you want some more, check out their reference library.