Customizable Tooltip-like jQuery Popover Plugin - alertTs

File Size: 9.08 KB
Views Total: 1792
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.


4. Full configuration options.


  // 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

// show the popover

// hide the popover

// change the options 
$(".elementName").alertTs("css",{border:"1px solid #ff0000"});

Change log:


  • bugfix

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