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.

New and improved in this version
  • NEW Option popupId. This allows multiple concurrent Smallipops.
  • FIX Wrong position of arrow when scrolling and smallipop realigns
  • FIX Mouseout for trigger works again

Older versions
0.6.0
  • NEW Done a lot of refactoring. Minified versions of js and css lost some KB.
  • NEW Tooltip arrows are now using :after and :before pseudo elements. Thanks to zalog for this patch.
    These arrows won't show up when using IE7 and earlier.
  • NEW All css classes are now using dashes. This simplifies a lot of things and makes the plugin more consistent.
    You should check your custom themes!
0.5.3
  • NEW Smallipop is now loadable as amd module via requirejs or something similar.
0.5.2
  • NEW Tour navigation can be disabled with tourNavigationEnabled. This hides the current position, navigation buttons and the disables the navigation by keyboard.
  • CHANGE Improved clickable area (Thanks to maedi). See github for details.
  • FIX Jumping to tour steps with $('.myTour').smallipop('tour', index) should now work fine.
0.5.1
  • NEW Set multiple options via the data-attribute and JSON.
  • CHANGE Inline hints are now deep copied instead of just a html copy.
  • FIX No flickering when Smallipop switching themes.
0.5.0
  • NEW Auto-align will now move the smallipop into the trigger area if the popup would violate the window bounds.
  • NEW Optional highlighting for tour elements
  • CHANGE More tests for the tour feature and callable methods
  • FIX onTourClose callback will trigger when pressing escape
  • FIX Tour won't continue after closing it and pressing the arrow keys
0.4.0
  • NEW Icon for closing the tour.
  • NEW Compatibility with jQuery 1.9.
  • CHANGE Smallipop won't scroll the window when the trigger has a fixed position.
0.3.5
  • CHANGE Fixed position for the popup when the trigger is having a parent with a fixed position.
0.3.2
  • NEW Control the tour with arrow keys
  • NEW Inline hint is now preferred to title attribute for tooltip content
  • NEW Use 'data-smallipop-referenced-content'-attribute to display updateable referenced content
  • NEW Option 'hideDelay' to customize time before the popup is hidden
  • FIX Javascript error when showing smallipop after deleting the last shown hint
0.3.1
  • NEW The tour feature!
  • NEW Customize each smallipop via the data attribute
  • NEW More callable methods
0.2.0
  • NEW Support for css animations
  • NEW Special handling for form elements
  • NEW Show, hide and destroy methods can be called directly on triggers
  • NEW Callbacks for show and hide events
  • NEW Update content on the fly via the setContent method
  • INFO A lot of code cleanup, refactoring, namespacing and stuff
0.1.6
  • FIX "invalid argument" error in IE8 sometimes happening
0.1.5
  • Added funcEase option to set your own easing function for the animations. (See the options)
  • Added touch support which disables the hover events and uses the click event on touch capable devices.
    Can be disabled with the touchSupport option.
  • Added triggerOnClick option to force disable the hover events and just listen for the click event on your triggers.
  • Window padding can now be changed with the windowPadding option.
    Smallipop tries to keep this distance from the window borders.
0.1.4
  • Added option to define the animation easing function.
  • Added options for triggers to show the smallipop on click instead of hover.
  • Automatic touch device support which uses touch events instead of hover. Can be disabled.

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@small-improvements.com or @sebobo


© 2012-2013 by Small Improvements


Smallipop is powered by coffeescript and sass.