jQuery Plugins › jQuery Tooltip Plugins › jQuery WebUI Popover

Bootstrap Popover Enhancement Plugin with jQuery - WebUI Popover

File Size: 274 KB
Views Total: 33125
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2025

Chrome, IE8+, FireFox, Opera, Safari#Bootstrap#popover
Bootstrap Popover Enhancement Plugin with jQuery - WebUI Popover

WebUI Popover is a powerful yet easy jQuery plugin used to extend the Bootstrap popover component with following advanced 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:

1. Load the required jQuery WebUI Popover stylesheet in the head section.

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

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>	
<script src="dist/jquery.webui-popover.min.js"></script>

3. Basic usage.

$('SELECTOR').webuiPopover(settings);

4. All the default settings.

// auto,top,right,bottom,left,top-right,
// top-left,bottom-right,bottom-left
placement:'auto',//values: 

container: null,

// can be set with number
width:'auto',
height:'auto',

// hover,click,sticky,manual
trigger:'click',

// custom styles
style:'',

// 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
cache:true,

// multiple popovers in page at same time
multi:false,

// show arrow or not
arrow:true,

// the popover title
title:'',

// content of the popover,content can be function
content:'',

// display close button or not
closeable:false,

// content padding
padding:true,

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

// 'html','iframe','async'
type:'html',

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

5. API Methods.

// Show Popover with options
WebuiPopovers.show('#el',{title:' hello popover',width:300});

//Hide Popover by jQuery selector
WebuiPopovers.hide('#el');

//Hide All Popovers
WebuiPopovers.hideAll();

//Update the Popover content 
WebuiPopovers.updateContent('.btn-showpop','some html or text');

Change logs:

v1.2.18 (2017-01-20)

  • fix touch event bugs,fix cache bugs

v1.2.14 (2016-10-19)

  • fixed some bugs
  • add new global method 'updateContentAsync' for async mode.
  • add new global method 'setDefaultOptions'

v1.2.14 (2016-09-07)

  • add global method 'updateContent'
  • add new option: 'selector' for delegate, now the plugin can deal with dynamic created content.
  • fix hover bugs

v1.2.13 (2016-08-24)

  • fix the arrow hidden bug in firefox
  • fix the position bug when container's position is 'relative'
  • add options to 'WebuiPopovers.show' method
  • add 'WebuiPopovers.create','WebuiPopovers.isCreated' methods
  • fix bugs,add new API and test htmls

v1.2.12 (2016-06-29)

  • add global object,fixed cache bugs

v1.2.11 (2016-05-26)

  • fix the position in container bug
  • fix the hidden bug in show method when trigger is set to 'manual'.
  • fix the position bug with svg.

v1.2.8 (2016-05-14)

  • fix and optimize the scroll placement bug
  • add rtl direction support
  • fix arrow hide bug when placement is set to auto or auto-buttom
  • fix the LESS variable collision

v1.2.7 (2016-04-12)

  • fix the scroll placement bug

v1.2.5 (2016-01-08)

  • bugfix

v1.2.4 (2015-12-17)

  • add async request method option:async.type,default value is 'GET'.
  • optimize the close button, make it more customizable.

v1.2.3 (2015-11-18)

  • fix the bug which cause the popover hide by click when multi popovers in same page.
  • optimize event handling for performance

v1.2.1 (2015-11-06)

  • now option url can be set with jQuery selector (eg: '#myContent') when type equals 'html'.
  • fix the bug which cause the popover content lost event handler.

v1.2.0 (2015-11-05)

  • make the animation avaiable for hidding.
  • add new trigger:'sticky'.
  • remove the option:constrains, move the value 'horizontal/vertical' to placement.
  • fix the bug which caused the popover can't be closed on mobile device.
  • new way to init popover content, set the content by next element html which has class 'webui-popover'.
  • optimese the calulate position algorithm.
  • update the demo page adapt for mobile device.

v1.1.9 (2015-11-04)

  • optimized the pop animation,update the demo for trigger:sticky

2015-10-30

  • v1.1.7

2015-09-11

  • fix auto-placement problem

2015-08-06

  • v1.1.6

2015-06-22

  • fixed trigger element click handler problem

2015-06-22

  • fixed some bugs, and reformat the source code by js beautifier

2015-05-24

  • fix content load bug with async mode

2015-05-14

  • add trigger option: manual and update demo for this option

2015-05-04

  • fixed delay 0 not work problem

2015-02-12

  • fixed the arrow position bug when element width/height larger than target width/height

2015-01-29

  • fixed body click event bug on async mode
  • fixed loading icon position on async mode

2014-12-02

  • update version to 1.1.0

2014-10-24

  • fixed arrow position problem of bottom-left

2014-10-23

  • fixed positions bugs
  • replace async loading animation to gif img
  • add escape key handler to close the pop
  • fixed arrow position problem

2014-09-03

  • fix css problems

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