Version 0.4.0 - Created by Sebastian Helzle for Small Improvements
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
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="smallipopHint"> <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="smallipopHint"> <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="smallipopHint"> 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="smallipopStatic" title="Below when possible"> Hover me! </a> <script type="text/javascript"> $('.smallipopBottom').smallipop({ theme: 'black', preferredPosition: 'bottom' }); </script>
Smallipop will appear when form elements are focused and stay even when the mouse leaves the input.
<input class="smallipopInput" type="text" size="30" title="Enter some text"/> <script type="text/javascript"> $('.smallipopInput').smallipop({ preferredPosition: right, theme: 'black', popupOffset: 0, triggerOnClick: true }); </script>
Hints can be positioned anywhere, even on absolute positioned or floating elements.
<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>
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?
<p> Some long <span class="smallipop">text</span>... And more with a more <span class="smallipop"> complex <span class="smallipopHint"> Some really important hint about the word <b>complex</b> </span> </span> hint... </p> <script type="text/javascript"> $('.smallipop').smallipop(); </script>
<span class="smallipopTour" data-smallipop-tour-index="1">Step 1</span> <span class="smallipopTour" data-smallipop-tour-index="2">Step 2</span> <span class="smallipopTour" data-smallipop-tour-index="3" data-smallipop-preferred-position="right">Step 3</span> <span class="smallipopTour" data-smallipop-tour-index="10">Step 4</span> <script type="text/javascript"> $('.smallipopTour').smallipop(); </script>
<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); }
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>
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. |
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 show and hide smallipop via manual calls. Only the first element found in the selectors result will be triggered.
$('.myTrigger').smallipop('show');
$('.myTrigger').smallipop('hide');
Removing smallipop from elements is also possible.
$('.myTriggers').smallipop('destroy');
Update the content of a smallipop while it's visible.
$('.myTrigger').smallipop('update', 'Test');
Both are also provided in the lib folder.
If you don't want to use the Modernizr library and want to save space you can remove the
.cssgradients, .borderradius, .rgba and .boxshadow classes in css/jquery-smallipop.css.
1. Copy lib/jquery-smallipop.js to your javascript folder.
2. Copy lib/jquery-x.x.x.min.js to your javascript folder if you don't use jQuery already.
3. Copy lib/modernizr-x.x.x.js to your javascript folder if you don't use modernizr already.
4. Copy css/jquery-smallipop.css to your css folder.
5. Copy css/animate.min.css to your css folder if you want to use the advanced css based animations.
There is a minified version of the smallipop javascript for production in the lib folder too.
Add these lines to the header of your html file and replace x.x.x with the correct versions
<link rel="stylesheet" href="css/jquery-smallipop.css" type="text/css" media="all" title="Screen"/> <script type="text/javascript" src="lib/jquery-x.x.x.min.js"></script> <script type="text/javascript" src="lib/modernizr-x.x.x.min.js"></script> <script type="text/javascript" src="lib/jquery-smallipop.js"></script>
We are using this plugin for a lot of things, so watch for new releases at github.
+ Click here to see changes in the last versions
Please send me suggestions, ideas for improvement or anything else to [email protected] or @sebobo
© 2012 by Small Improvements
Smallipop is powered by coffeescript and sass.