Versatile and Beautiful Tooltip Plugin - smallipop

File Size: 225 KB
Views Total: 6358
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Versatile and Beautiful Tooltip Plugin - smallipop

smallipop is a small (~ 2KB gziped) and powerful jQuery plugin for creating a wide variety of tooltips and info popups on your page. It comes with 20 different themes so that you can have 20 different tooltips on one page. Check the demo page for more information.

Features:

  • CSS3 Animations Supported
  • Automatic orientation Supported
  • Custom themes for different use cases
  • Fallbacks for older browsers and no images.

Basic Usage:

1. Include necessary javascript files in your page

<script type="text/javascript" src="lib/contrib/modernizr-2.0.6.min.js"></script> 
<script type="text/javascript" src="lib/contrib/jquery-1.9.0.min.js"></script> 
<script type="text/javascript" src="lib/jquery.smallipop.js"></script> 

2. Include smallipop CSS

<link rel="stylesheet" href="css/jquery.smallipop.css" type="text/css" media="all" title="Screen" />

3. Include Animate CSS if you want to use the advanced css based animations

<link rel="stylesheet" href="css/contrib/animate.min.css" type="text/css" media="all" title="Screen" />

4. Markup

<a class="demo" href="#" title="That was easy!">Hover me!</a>

5. Call the plugin

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

Change Logs:

v0.6.4 (2015-02-27)

  • Add composer support

v0.6.3 (2015-02-06)

  • [TASK] Don't create smallipop instances when selector is empty.
  • [TASK] Divided scss into separate files so they can be included more easily.
  • [TASK] Added package.json with correct dependencies for developing.

v0.6.2 (2015-01-17)

  • [BUGFIX] Uppercase nodeName before checking if element is HTML
  • [BUGFIX] Hint class was wrong in readme
  • Wrong position of arrow when scrolling and smallipop realigns itself
  • Mouseout for trigger works again
  • Done a lot of refactoring. Minified versions of js and css lost some KB.
  • Tooltip arrows are now using :after and :before pseudo elements. 
  • 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.
  • The default inline hint class is now smallipop-hint instead of smallipopHint. But this is still available as option, so you can use your old smallipopHint class.

v0.5.3 (2013-06-07)

  • Using relative paths without base url for ie compatibility.
  • Updated jQuery

This awesome jQuery plugin is developed by Sebobo. For more Advanced Usages, please check the demo page or visit the official website.