Customizable Tooltip-like jQuery Popover Plugin - alertTs

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.