Tiny Skinnable jQuery Tooltip Plugin - Tips

Tips is a tiny jQuery plugin which allows to you attach a CSS styleable, auto-positioned bubble tooltip to any Html elements.

How to use it:

1. Load the required jQuery.tips.css in the header and the jQuery.tips.js in the footer.

<link href="jQuery.tips.css" rel="stylesheet">
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jQuery.tips.js"></script>

2. Wrap the element into an inline element.

<span class="demo">Hover me</span>

3. Call the plugin and set the custom content for the tooltip.

$('.demo').tips({
  msg: 'This is the tips content.'
});

4. Use 'white' skin.

$('.demo').tips({
  skin: 'white',
  msg: 'This is the tips content.'
});

5. Destroy the plugin.

$('.demo').tips({
  destroy : true
});

6. Add your own skin in the CSS.

.tip.my-skin .tip-inner {
  ...
}

.tip.my-skin .arrow-front {
  ...
}

.tip.my-skin .arrow-back {
  ...
}

---

This awesome jQuery plugin is developed by aisin. For more Advanced Usages, please check the demo page or visit the official website.