Smallipop - A versatile jQuery plugin for displaying beautiful tooltips and interactive tours

Create a smallipop

Here is the easiest way to create a smallipop

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

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

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

<span class="smallipop">
    Hover me!
    <span class="smallipop-hint">
        <b>Give me some markup!</b>
    </span>
</span>

You can provide the content for the bubble via javascript too

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

<script type="text/javascript">
    $('#tipcustomhint').smallipop({}, "I'm the real hint!");
</script>

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>

<script type="text/javascript">
    $('#tipkiller').click(function(e) {
        e.preventDefault();
        $('#sampleContainer').html('<div>Some new content</div>');
    });
</script>

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

<div class="smallipop">
    Hover me!
    <span class="smallipop-hint">
        <b>Markuptip with very long text</b><br/>
        ...
    </span>
</div>

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

<span class="smallipopHorizontal">
    Hover me!
    <span class="smallipop-hint">
        Good for dropdowns!
    </span>
</span>

<script type="text/javascript">
    $('.smallipopHorizontal').smallipop({
        preferredPosition: 'right',
        theme: 'black',
        popupOffset: 10,
        invertAnimation: true
    });
</script>

Don't like animations? No Problem!

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

<script type="text/javascript">
    $('.smallipopStatic').smallipop({
        theme: 'black',
        popupDistance: 0,
        popupYOffset: -14,
        popupAnimationSpeed: 100
    });
</script>

Change default positioning

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

<script type="text/javascript">
    $('.smallipopBottom').smallipop({
        theme: 'black',
        preferredPosition: 'bottom'
    });
</script>