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.
Table of Contents
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="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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.
$('SELECTOR').webuiPopover(settings);
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> </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
Done
Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
