jQuery Tooltip Plugin with CSS3 Animation Effects - sBubble

sBubble is a jquery plugin that enables you to create beautiful tooltips with CSS3 animation effect for your webpage. It also provides some color themes for creating different styles of tooltips.

Usage:

1. Include sBubble CSS In your HEAD section

<link rel="stylesheet" href="css/jquery.sBubble-0.1.1.css" />

2. Markup

<div id="box">
 <a id="top" href="#">Top</a> | 
 <a id="right" href="#">Right</a> |
 <a id="bottom" href="#">Bottom</a> |
 <a id="left" href="#">Left</a> 
</div>

3. Include jQuery Library and sBubble.js

<script src="js/jquery-1.8.0.min.js"></script> 
<script src="js/jquery.sBubble-0.1.1.js"></script> 

4. Call the plugin with options

/**
*  width, height, topOffset, leftOffset
*  all of above options can passed as string or integers
*  For example: '100px' or 100
*/

$('#top').sBubble({
  content: 'Tooltip on Top',
  height: '19px',
  width: '100px'
});

$('#right').sBubble({
  content: 'Tooltip on Right',
  position: 'right',
  height: 19,
  width: 100,
  theme: 'orange'
});

$('#bottom').sBubble({
  content: 'Tooltip on Bottom',
  position: 'bottom',
  height: 19,
  width: 110,
  theme: 'blue'
});

$('#left').sBubble({
  content: 'Tooltip on Left',
  position: 'left',
  height: 19,
  width: 100,
  theme: 'green'
});

Change log:

2015-04-02

• delay fix.

---

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