Customizable Tooltip-like jQuery Popover Plugin - alertTs
File Size: | 9.08 KB |
---|---|
Views Total: | 1785 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
alertTs is a simple, CSS-less jQuery popover plugin to create a highly customizable popover which appears when the user hovers or clicks on an element.
How to use it:
1. Load the jQuery alertTs plugin's script after jQuery JavaScript library.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="jquery.alertTs.js"></script>
2. Add custom content to the popover using data-title
attribute.
<input type="button" class="btn" data-title="Popover Content" value="Click me">
3. Initialize the plugin to display a default popover.
$('.btn').alertTs();
4. Full configuration options.
$('.btn').alertTs({ // popup position face: "top", left: 0, top: 0, // trigger events // click, otherClick or hover act: "", // size of the triangle aSize: 6, // position of the triangle aLoc: "auto", // fade or leave blank effect: "", // animation speed effectSpeed: 400, // CSS z-index property zIndex: "auto", // display a close button close: false, // custom content content: "Popover Contet", loading: null, // false = postion the popover relative to its container position: false, // width / height of the popover width: "auto", minWidth: 50, height: null, minHeight: 20, // enable cache cache: true, // mouse hover delay delay: 300, // additional CSS styles css: null, // additional CSS classes cssStyle: null, // auto dismiss after a timeout timeout: null, // callback events callback: { init: function () {}, show: function () {}, beforeShow: function () {}, hide: function () {} } });
5. Method API.
// initialize the plugin $(".elementName").alertTs(); // show the popover $(".elementName").alertTs("show"); // hide the popover $(".elementName").alertTs("hide"); // change the options $(".elementName").alertTs("face","top"); $(".elementName").alertTs("zIndex",9999); $(".elementName").alertTs("css",{border:"1px solid #ff0000"});
Change log:
2015-10-15
- bugfix
This awesome jQuery plugin is developed by mabenwansui. For more Advanced Usages, please check the demo page or visit the official website.