Ajax-enabled jQuery Balloon Tooltip Plugin - mb.balloon

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

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.


  • 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-balloon = "Tooltip content" 
      data-justonce="false">Basic Demo

3. Load the remote data into the tooltip.

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

4. Then initialize the plugin and done.


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"




  • Various fix


  • Various fix


  • self.opt.cloneContent


  • update and fix for jQuery 3.0.0


  • various fix

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