| 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 | smallipopHint | 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 |
| 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. |
| 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. |
| 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. |
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.
<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
<span class="smallipop" data-smallipop='{"theme":"black","preferredPosition":"bottom"}' title="Some text">
Hover me!
</span>
<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>
<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>
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>
<a id="tipDontHideOnTriggerClick" title="Change">
Hover me!
</a>
<a id="tipDontHideOnContentClick" title="Change">
Hover me!
<span class="smallipopHint">
<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>
Hover the links to see the different themes
<script type="text/javascript">
$('.myElement').smallipop({
theme: 'blue fatShadow'
});
</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.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);
}
© 2012-2013 by Small Improvements