Ajax-enabled jQuery Balloon Tooltip Plugin - mb.balloon

Ajax-enabled jQuery Balloon Tooltip Plugin - mb.balloon
File Size: 75.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

mb.balloon is a brand new jQuery tooltip plugin which displays animated tooltips/popups/hints with an optional fullscreen overlay on any DOM elements. Licences: MIT, GPL.

Features:

  • Supports inline html elements and remote data via AJAX
  • Supports hover, click, focus events to trigger the tooltips.
  • Customizable fullscreen overlay to focus your user's attention on the target element.

How to use it:

1. Include jQuery library and the jQuery mb.balloon plugin's JS and CSS on your html page.

<link href="css/mb.balloon.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="inc/jquery.mb.balloon.js"></script>

2. Create a basic balloon tooltip appending to the span element. All the options can be passed via data-* attributes as follow.

<span id="demo" class="opener" 
      data-addoverlay="true" 
      data-balloon = "Tooltip content" 
      data-timer="3000" 
      data-justonce="false">Basic Demo
</span>

3. Load the remote data into the tooltip.

<div id="demo" class="opener" 
     data-balloon = "{ajax} balloon-ajax-content.html">
     click me
</div>

4. Then initialize the plugin and done.

jQuery.balloon.init();

5. Full plugin options.

addclose     : false,
addoverlay   : false,
target       : "self",
highlight    : true,
justonce     : false,
ease         : [0, .96, 0, 1.02],
animTime     : 250,
bgcolor      : "#333333",
bordercolor  : "#ffffff",
textcolor    : "#ffffff",
oncursor     : false,
forceposition: "auto", // or: up, down, left, right
timer        : 0, // close the balloon after x millis (0 = never)
balloon      : "This is an mb.balloon"

Change log:

2016-10-07

  • Various fix

2016-10-05

  • self.opt.cloneContent

2016-06-24

  • update and fix for jQuery 3.0.0

2015-05-08

  • various fix

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