Introducing a jQuery tooltip plugin for control-obsessed designers.

Tooltip plugins make it too difficult to control the CSS. So I created tooltipsy to simply provide extremely efficient tooltip functionality. Tooltipsy gives you complete control over the CSS, animation, and position.

1. Install

Download tooltipsy and move tooltipsy.min.js into wherever you keep your javascript. Then include the javascript in your HTML.

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

2. Style

You control the CSS. Make it look how you want. Here’s a sample to get you started.

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

3. Activate

The easiest setup is to add a title attribute and let tooltipsy do the work for you.

 
<a class="hastip" title="Show me">
<a class="hastip" title="Me too">
 
<script type="text/javascript">
$('.hastip').tooltipsy();
</script>