sBubble: jQuery/CSS3 Tooltip Plugin

sBubble is a jQuery tooltip plugin which is totally based on CSS3 for shapes and animations. Yes no images used and no jQuery code used for animation. Plus some color themes are also provided.

Demo Plugin Source

Basic Usage

Step 1

Include jQuery and sBubble script files.

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

Step 2

Add CSS for sBubble.

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

Step 3

Call sBubble plugin method.

$('#targetElement').sBubble({
    content: 'Add <strong>content</strong> for sBubble...',
    width  : 100, //this can be string as well: '100px'
    height : 20
});

content option is mandatory and it’s the innerHTML of tooltip that appears on hover of #targetElement.

width and height are optional and its unit is in pixel. Default width/height of tooltip is 120px/60px. It’s better to provide width/height according the content.


Tooltip Position

Default position of tooltip is top. You can position the tooltip to right, bottom or left using position option.

$('#targetElement').sBubble({
    content : 'Tooltip on Right',
    position: 'right', //other options are bottom, left, top
    height  : 19,
    width   : 100
});

Position Offset

You can further refine the tooltip position using topOffset and leftOffset options. Let’s say you have positioned your tooltip on the right and you want to add some more margin between the right of targetElement and left of tooltip. You can do so by providing a positive value for leftOffset.

$('#targetElement').sBubble({
    content   : 'Tooltip on Right',
    position  : 'right',
    height    : 19,
    width     : 100,
    leftOffset: 10 //this can be string as well: '10px'
});

Simply remember this rule. Positive value for topOffset will move the tooltip downwards and negative value will move tooltip upwards. Similarly positive value for leftOffset will move tooltip to the right and negative value will move it to the left.


Tooltip Theme

Default theme for the tooltip is black but there are three other themes (green, blue, and orange) as well. You can change the theme using theme option.

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

Creating Custom Theme

You can create your own themes only using CSS. All you need to do is create a new CSS theme class. Here’s an example custom theme.

.sBubble.myTheme {
    background: #D600E5;
    border-color: #91009B;
    box-shadow: 0 0 12px #666, inset 0 0 30px #9D00A8;
}
.sBubbleArw.top.myTheme {
    border-top-color: #91009B;
}
.sBubbleArw.bottom.myTheme {
    border-bottom-color: #91009B;
}
.sBubbleArw.left.myTheme {
    border-left-color: #91009B;
}
.sBubbleArw.right.myTheme {
    border-right-color: #91009B;
}

Here we defined a new theme class myTheme. The selector .sBubble.myTheme represents the body of tooltip in which content goes.

All the selectors related to sBubbleArw are setting the color of arrow when appear on top, bottom, left, or right.


Disable Tooltip Arrow

You can disable the arrow simply by removing all styles related to sBubbleArw within the theme. So our custom theme myTheme created in previous section will become.

.sBubble.myTheme {
    background: #D600E5;
    border-color: #91009B;
    box-shadow: 0 0 12px #666, inset 0 0 30px #9D00A8;
}
 
/***** Remove These Styles *****/
/*******************************
.sBubbleArw.top.myTheme {
    border-top-color: #91009B;
}
.sBubbleArw.bottom.myTheme {
    border-bottom-color: #91009B;
}
.sBubbleArw.left.myTheme {
    border-left-color: #91009B;
}
.sBubbleArw.right.myTheme {
    border-right-color: #91009B;
}
*******************************/

comments powered by Disqus