Ajax-enabled jQuery Balloon Tooltip Plugin - mb.balloon
File Size: | 73.5 KB |
---|---|
Views Total: | 12221 |
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"
Changelog:
2023-04-19
- Updated JS
2017-09-21
- Various fix
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.