smallipop logo
smallipop

Created by Sebastian Helzle

This is a jQuery plugin for displaying tooltips.
There are a lot of other plugins for this task, but they didn't meet our
various requirements at Small Improvements.

So finally we decided to create our own plugin and wanted to share it with you!


Download smallipop now   Visit smallipop at github




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

Hover me! Give me some markup
<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

Look to the right
Hover me! Markuptip with very long text
and a link with some javascript which replaces the trigger

<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?

Hover me! Good for dropdowns! Or me! Auto align when there's no room on the right.
<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>
Image with absolute positioned hints

Hints can be positioned anywhere, even on absolute positioned or floating elements.

Bird in china
+
 
Black hole sun
+
 
The bird is the word

This bubble has a white theme extended by another sub theme 'transparent'.

Also the trigger is made out of pure css.
arrow
It's a house!

It has an image as trigger.
We have provided some you can use in the images folder.
<script type="text/javascript">
    $('.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
    });
</script>
Text with inline hints

Something completely different

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt Some info about invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam

accusam

Bird in china

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<p>
    Some long <span class="smallipop">text</span>...

    And more with a more
    <span class="smallipop">
        complex
        <span class="smallipop-hint">
            Some really important hint about the word <b>complex</b>
        </span>
    </span>
    hint...
</p>

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

Features

  • Small
    Only ~ 12KB minified and even less when gziped by your server.
  • Pure css
    No images but fallbacks for older browsers.
  • Compatibility
    smallipop has been tested with IE7-9, Chrome, Safari 4+,
    Opera and Firefox 4+
  • Custom themes
    For different use cases.
  • Free positioning
    The popup code will be added to the document root so the
    position won't be affected by your layout.
  • Automatic orientation
    The popup will try to stay in the visible area of the screen,
    even when scrolling or at the edges.
  • Only a single popup element
    Some plugins create a hidden popup for each trigger.
  • Custom options for each trigger
    You can have 20 different popups with 20 different themes
    on one page if you like.
  • Licensed under the MIT license.

We are using this plugin for a lot of things, so watch for new releases at github.

Changelog

Check out here


Dependencies
  • jQuery version 1.5.2 or better
  • Modernizr for browser capability fallbacks.
    The library is included in the plugins lib folder.


Have fun and check out my other plugins

jQuery Rondell


Feedback is welcome!

Please send me suggestions, ideas for improvement or anything else to sebastian@helzle.net or @sebobo


© 2011-2015 by Small Improvements


Smallipop is powered by coffeescript and sass.