Bootstrap Popover Enhancement In jQuery Plugin – WebUI Popover

Bootstrap Popover Enhancement Plugin with jQuery - WebUI Popover
File Size: 7.4 KB
Views Total: 2203 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

A Free jQuery Plugin with WebUI Popover is a light weight & easy to use. tooltip Popup behavior on hover or on click display different-different position with help of this plugin. it used to extend the Bootstrap popover component with following advanced features. it is fully customize and many options are available related in popover.

Features :

  • Auto position.
  • More specific positions.
  • Custom triggers.
  • Multiple popovers at once.
  • Popover title.
  • Closeable popover.
  • Pop with any elements (table, list, iframe, etc…)
  • Custom callback events.

How to use it:

Add jQuery library and the jQuery WebUI Popover plugin at the bottom for faster page loading.

<script src="//"></script>	
<script src="dist/jquery.webui-popover.min.js"></script>

Add the jQuery WebUI Popover stylesheet.

<link rel="stylesheet" href="dist/jquery.webui-popover.min.css">

Add Html Code.

<a href="#" class="show-pop btn" data-placement="left">pop left</a>

Basic usage.


All the default settings.

// auto,top,right,bottom,left,top-right,
// top-left,bottom-right,bottom-left

container: null,

// can be set with number

// hover,click,sticky,manual

// custom styles

// jQuery selector, if a selector is provided, popover objects will be delegated to the specified.
selector: false,  

// show and hide delay time of the popover
// works only when trigger is 'hover'
// the value can be number or object
delay: {
  show: null,
  hide: 300

async: {
  type: 'GET',
  //executed before ajax request
  before: function(that, xhr) {},
  // executed after successful ajax request
  success: success(that, data) {},
  //function(that, xhr, data){}
  error: null 

// if set to false,popover will destroy and recreate

// multiple popovers in page at same time

// show arrow or not

// the popover title

// content of the popover,content can be function

// display close button or not

// content padding

// if not empty ,plugin will load content by url

// 'html','iframe','async'

// ltr,rtl
direction: '', 

// custom animation
animation: null,

// custom template
template: '<div class="webui-popover">' +
    '<div class="arrow"></div>' +
    '<div class="webui-popover-inner">' +
    '<a href="#" class="close">x</a>' +
    '<h3 class="webui-popover-title"></h3>' +
    '<div class="webui-popover-content"><i class="icon-refresh"></i> <p>&nbsp;</p></div>' +
    '</div>' +

// if backdrop is set to true, popover will use backdrop on open
backdrop: false,

// if popover can be dismissed by  outside click or escape key
dismissible: true,

// callbacks
onShow: null,
onHide: null,

// abort XHR
abortXHR: true,

// automatic hide the popover by a specified timeout, the value must be false,or a number(1000 = 1s).
autoHide: false,

// offset the top of the popover
offsetTop: 0,

// offset the left of the popover
offsetLeft: 0,

iframeOptions: {
  frameborder: '0',
  allowtransparency: 'true',
  id: '',
  name: '',
  scrolling: '',
  onload: '',
  height: '',
  width: ''

hideEmpty: false


Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like