Smallipop - A versatile jQuery plugin for displaying beautiful tooltips

$('.myElement').smallipop({
    hideTrigger: true, // Trigger is hidden when the bubble is shown
    theme: 'white whiteTransparent', // White theme is used with it's transparent extension
    popupYOffset: 20, // Bubble has a 20px vertical offset
    popupDistance: 30, // Bubble travels vertically by 30px when fading in
    popupOffset: 0, // No horizontal offset
});

Create a smallipop

Here is the easiest way to create a smallipop:

<a class="myElement" href="#" title="That was easy!">And now hover me!</a>

Then add some javascript:

<script type="text/javascript">
    $(function() {
        $('.myElement').smallipop();
    });
</script>

If you like some markup as tooltip, you can do that as well

<span class="smallipop">
    Hover me!
    <div class="smallipopHint">
        <b>Give me some markup!</b>
    </div>
</span>

Hover me!

Give me some markup

You can provide the content for the bubble via javascript too

<a href="#" id="tipcustomhint" title="I'm the old title">
    Hover me!
</a>

Add some javascript to the mix:

$('#tipcustomhint').smallipop({}, "I'm the real hint!");

Hover me!

There are cases when the trigger is replaced or changed when clicked and the tooltip needs to be hidden

<div id="sampleContainer">
    <a href="#" id="tipkiller" class="smallipop" title="Click the link and I will be gone">
        Hover me!
    </a>
</div>
                

With this javascript:

$('#tipkiller').click(function(e) {
    e.preventDefault();
    $('#sampleContainer').html('<div>Some new content</div>');
});

Elements can be positioned everywhere, smallipop will be at the right position

<div class="smallipop" style="float:right;">
    Hover me! 
    <span class="smallipopHint">
        <b>Markuptip with very long text</b><br/>
        ...
    </span>
</div>

Look to the right!

How about showing the bubble on the left or right of an element?

<span class="smallipopHorizontal">
    Hover me!
    <span class="smallipopHint">
        Good for dropdowns!
    </span>
</span>

With this javascript:

$('.smallipopHorizontal').smallipop({
    horizontal: true,
    theme: 'black',
    popupOffset: 10,
    invertAnimation: true
});

Hover me! Good for dropdowns! Or me! Auto align when there's no room on the right.

Don't like animations? No Problem

<a class="smallipopStatic" title="Doesn't move an inch">
    Hover me!
</a>

With this javascript:

$('.smallipopStatic').smallipop({
    theme: 'black',
    popupDistance: 0,
    popupYOffset: -14,
    popupAnimationSpeed: 100
});

Hover me!

Change default positioning

<a class="smallipopStatic" title="Below when possible">
    Hover me!
</a>

With this javascript:

$('.smallipopBottom').smallipop({
    theme: 'black',
    preferredPosition: 'bottom'
});

Hover me!

#smallipop.fatShadow {
  -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
     -moz-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
          box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}

Installation

Prequisites

• jQuery
  1.5.2 or better
• Modernizr
  This library tests the browser for feature support and adds classes to the body tag.
  We use this for css fallbacks in our themes.

Both are also provided in the lib folder. If you don't want to use the Modernizr library you should remove the
.cssgradients, .borderradius, .rgba and .boxshadow classes in css/jquery-smallipop.css.

Required files

1. Copy lib/jquery-smallipop.js to your javascript folder.

2. Copy lib/jquery-x.x.x.min.js to your javascript folder if you don't use jQuery already.

3. Copy lib/modernizr-x.x.x.js to your javascript folder if you don't use modernizr already.

4. Copy css/jquery-smallipop.css to your css folder.

There is a minified version of the smallipop javascript for production in the lib folder too.

Modify your html header

Add these lines to the header of your html file and replace x.x.x with the correct versions

<link rel="stylesheet" href="css/jquery-smallipop.css" type="text/css" media="all" title="Screen"/>   
<script type="text/javascript" src="lib/jquery-x.x.x.min.js"></script>   
<script type="text/javascript" src="lib/modernizr-x.x.x.min.js"></script>   
<script type="text/javascript" src="lib/jquery-smallipop.js"></script>