Options

Key Default value Description
autoscrollPadding 200 Visible window margin in pixels in which the tour feature tries to stay in, when showing the next or previous step in a tour.
funcEase easeInOutQuad Easing function for the animations.
handleInputs true Enables the focus and blur events on tags like input, textarea, select and disables the hide on click.
hideDelay 500 Time before popup will be hidden.
hideOnPopupClick true Hide smallipop when it is clicked.
hideOnTriggerClick true Hide smallipop when the trigger is clicked.
hideTrigger false Hide the trigger when the popup is shown.
infoClass smallipop-hint Class in an element which contains markup content for the popup.
invertAnimation false The popup will move up when an element is hovered and further up when fading out. If you set this to true, the popup will move down when fading out.
onAfterHide null Callback after smallipop is hidden
onAfterShow null Callback after smallipop is shown
onBeforeHide null Callback before smallipop is hidden
onBeforeShow null Callback before smallipop is shown
onTourClose null Callback when the tour has finished
onTourNext null Callback when the next tour element is shown
onTourPrev null Callback when the previous tour element is shown
popupId '' A unique string. For each set of Smallipops you can define a separate Id. This allows multiple concurrent Smallipops.
popupAnimationSpeed 200 How much time the popup needs to reach it's final animation position and opacity in milliseconds.
popupDelay 100 How much time in milliseconds you have to hover on an element before the popups shows up.
popupDistance 20 Vertical distance when the popup appears and disappears.
popupOffset 31 Horizontal offset for the popup from the center of the trigger when the popup is aligned left or right.
popupYOffset 0 Vertical offset for the popup.
preferredPosition 'top' Use "top" or "bottom" for the default layout and "left" or "right" when the popup should stay horizontal.
referencedContent null A css selector from which the tooltip content should be loaded. For example '#myContent'
theme default black, blue, white and a default theme are included in the css file.
touchSupport true When touch events are supported hover events are disabled and smallipop will activated by touching a trigger.
A second touch will trigger the default action on the trigger. I.e. open a link. The touch feature detection currently requires the modernizr library.
tourHighlight false Will display an transparent overlay to highlight the tour triggers.
tourHighlightColor '#222' The overlay color.
tourHightlightFadeDuration 200 The duration for the overlay fade effect.
tourHighlightOpacity .5 The opacity of the overlay.
tourHighlightZIndex 9997 The z-index which will be used for the overlay and the highlighted trigger.
tourNavigationEnabled true Whether the tour navigation buttons and current position should be display in the tour popup.
triggerAnimationSpeed 150 How fast the trigger fades in and out when hideTrigger is set.
triggerOnClick false Disables the hover event for triggers and smallipop will be activated by clicking the trigger.
A second click will trigger the default action on the trigger. I.e. open a link.
windowPadding 30 Minimal distance to the window borders the smallipop should keep when computing it's orientation.

Customize Smallipops individually

You can customize each smallipop with a lot of options and callbacks.
Most of the options can be defined via the html data attribute too. This will then only affect a single smallipop, which helps you customizing single smallipops without creating different calls for each configuration.

Hover me!
<span class="smallipop" data-smallipop-preferred-position="right" title="Some text">
    Hover me!
</span>

It's also possible to use JSON in the data attribute

Hover me!
<span class="smallipop" data-smallipop='{"theme":"black","preferredPosition":"bottom"}' title="Some text">
    Hover me!
</span>

Advanced configuration

Change content on the fly and use callbacks
<a id="tipChangeContent" title="Change">
    Hover me!
</a>

<script type="text/javascript">
    $('#tipChangeContent').smallipop({
        onAfterShow: function(trigger) {
            $.smallipop.setContent("I'm the new content and replaced the old boring content!");
        },
        onBeforeHide: function(trigger) {
            $.smallipop.setContent("Bye bye");
        }
    });
</script>
Use referenced element as tooltip content
Hover me!

The real tooltip content!
<a id="tipReferenced" data-smallipop-referenced-content="#tipReferencedTarget" title="Referenced content">
    Hover me!
</a>
<div id="tipReferencedTarget">
    The real tooltip content!
</div>

<script type="text/javascript">
    $('#tipReferenced').smallipop();
</script>
Use css animations

Example powered by Animate.css

These effects will only work if your browser support css animations.
When the Modernizr library is used and the browser doesn't support css animations the jQuery animations will be used as fallback.

<a id="tipCSSAnimated" title="Fancy">
    Hover me!
</a>

<script type="text/javascript">
    $('#tipCSSAnimated').smallipop({
        cssAnimations: {
            enabled: true,
            show: 'animated bounceInDown',
            hide: 'animated hinge'
        }
    });
</script>
Hide on click specials
Tip won't hide when clicking the trigger Hover me!

Tip won't hide when clicking into the popup Hover me! Markuptip with very long text
and a link which doesn't hide the popup
<a id="tipDontHideOnTriggerClick" title="Change">
    Hover me!
</a>

<a id="tipDontHideOnContentClick" title="Change">
    Hover me!
    <span class="smallipop-hint">
        <b>Markuptip with very long text</b><br/>
        <a href="#" onclick="return false;">
            and a link which doesn't hide the popup
        </a>
    </span>
</a>

<script type="text/javascript">
    $('#tipDontHideOnTriggerClick').smallipop({
        hideOnTriggerClick: false
    });
    $('#tipDontHideOnContentClick').smallipop({
        hideOnPopupClick: false
    });
</script>

Themes:

Hover the links to see the different themes

Default theme  -  Blue theme  -  Black theme  -  White theme  -  Orange theme
You can extend a theme with an extension theme Hover me! Look at this fat shadow!
<script type="text/javascript">
    $('.myElement').smallipop({
        theme: 'blue fat-shadow'
    });
</script>

This allows you to have one basic theme and several subthemes with different border styles or colors for example.

The css for the extension theme looks like this:

.smallipop-instance.smallipop-theme-fat-shadow {
  -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);
}

© 2012-2013 by Small Improvements