Beautiful Tooltip Popup For jQuery Plugin | smallipop

smallipop jQuery plugin was built because not all of the tooltips we tested met our requirements.

best tooltip library, add tooltip to anchor tag, tooltip js plugin, jquery tooltip min js free download, simple jquery tooltip, interactive tooltip, how to add tooltip dynamically in jquery

We wanted:

  • Pure CSS design. Backup actions for old browsers and no images.
  • CSS animations supported.
  • Custom themes for different use cases.
  • The pop-up trigger can be placed anywhere. The popup will be displayed at the root of the body, so the position will not be affected by your layout.
  • Auto orientation where the popup appears. The popup will try to stay in the visible area of ​​the screen, even when scrolling or at the edges.
  • Only one popup in the document. Some plugins create a hidden popup for each launcher.
  • Custom options for each operator. You can have 20 different popups with 20 different themes on one page if you like.
  • small. Only ~3.5KB minified and ~2KB gzipped.

How to make use of it:

1. Include the necessary JavaScript files on 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 CSS Smallipop.

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

3. Include Animate CSS if you want to use advanced CSS-based animation.

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

4. Coding.

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

5. Call the plugin.

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

Versatile and Beautiful Tooltip Plugin, smallipop Github


See Demo And Download

Official Website(Sebobo): Click Here

This superior jQuery/javascript plugin is developed by Sebobo. For extra advanced usage, please go to the official website.

Share