WebUI-Popover
A lightWeight popover plugin with jquery, enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap, but bootstrap is not necessary!
Browser compatibility: ie8+,Chrome,Safari,Firefox,Opera
Requirement
jquery1.7+
##Features
- fast,lightweight
- support more placements
- auto caculate placement
- close button in popover
- multipule popovers in same page
- different styles
- support url and iframe
- support async mode
- different animations
- support backdrop
##NPM
npm install webui-popover
##Bower
bower install webui-popover
##CDN
WebUI Popover Support CDN from version 1.2.1, avaliable on JSDELIVR
##Demo
WebUI Popover Demo
##Getting Started
####Including it on your page
Localfile
<link rel="stylesheet" href="jquery.webui-popover.css">
...
<script src="jquery.js"></script>
<script src="jquery.webui-popover.js"></script>
Or CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.css">
...
<script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.js"></script>
####Use the plugin as follows:
$('a').webuiPopover(options);
####Some Examples:
Simplest Popover
$('a').webuiPopover({title:'Title',content:'Content'});
Create Popover by dom element data-* attribute
<a href="#" data-title="Title" data-content="Contents..." data-placement="right">show pop</a>
$('a').webuiPopover();
Popover content can be easily setted by next element with class 'webui-popover-content'
<a href="#" >shop pop</a>
<div class="webui-popover-content">
<p>popover content</p>
</div>
$('a').webuiPopover();
Or, just use jQuery selector (id selector recommended) to set the Popover content.
<a href="#" >shop pop</a>
<div id="myContent">
<p>popover content</p>
</div>
$('a').webuiPopover({url:'#myContent'});
Popover with specified placement.
$('a').webuiPopover({title:'Title',content:'Content',placement:'bottom'});
Popover trigged by mouse hover.
$('a').webuiPopover({content:'Content',trigger:'hover'});
Create Sticky Popover.
$('a').webuiPopover({content:'Content',trigger:'sticky'});
Create Popover Dynamically (by new option:'selector').
<a href="#" id="addPop" class="btn btn-default"> add Pop </a>
<div class="pops">
</div>
$('#addPop').on('click',function(e){
$('<a href="#" class="show-pop data-placement="auto-bottom" data-title="Dynamic Title" data-content="Dynamic content"> Dynamic created Pop </a>').appendTo('.pops');
});
Popover with inversed style.
$('a').webuiPopover({content:'Content',style:'inverse'});
Popover with fixed width and height
$('a').webuiPopover({content:'Content',width:300,height:200});
Popover with close button
$('a').webuiPopover({title:'Title',content:'Content',closeable:true});
Animate the Popover
$('a').webuiPopover({title:'Title',content:'Content',animation:'pop'});
Popover with iframe
$('a').webuiPopover({type:'iframe',url:'http://getbootstrap.com'});
Async Mode
$('a').webuiPopover({
type:'async',
url:'https://api.github.com/',
content:function(data){
var html = '<ul>';
for(var key in data){html+='<li>'+data[key]+'</li>';}
html+='</ul>';
return html;
}
});
Async simply by url
$('a').webuiPopover({
type:'async',
url:'http://some.website/htmldata'
});
Trigger the Popover by manual
$('a').webuiPopover({trigger:'manual'});
...
$('a').webuiPopover('show');
$('a').webuiPopover('hide');
Destroy the Popover
$('a').webuiPopover('destroy');
Default options
{
placement:'auto',
container: document.body,
width:'auto',
height:'auto',
trigger:'click',
selector:false,
style:'',
animation:null,
delay: {
show: null,
hide: 300
},
async: {
type:'GET',
before: function(that, xhr, settings) {},
success: function(that, data) {}
error: function(that, xhr, data) {}
},
cache:true,
multi:false,
arrow:true,
title:'',
content:'',
closeable:false,
direction:'',
padding:true,
type:'html',
url:'',
backdrop:false,
dismissible:true,
autoHide:false,
offsetTop:0,
offsetLeft:0,
onShow: function($element) {},
onHide: function($element) {},
}
###Global Methods
In some situation, you may want to manipulate the plugin like 'show/hide' popovers by global methods. The new object WebuiPopovers is introduced and exposed to the global window object, so you can access these methods like 'WebuiPopovers.someMethod()...'.
Here are examples of calling code.
$('a').on('click',function(e){
e.stopPropagation();
WebuiPopovers.show('#el');
});
WebuiPopovers.show('#el',{title:' hello popover',width:300});
WebuiPopovers.hide('#el');
WebuiPopovers.hideAll();
WebuiPopovers.updateContent('.btn-showpop','some html or text');
WebuiPopovers.updateContentAsync('.btn-showpop','http://someUrl');
WebuiPopovers.setDefaultOptions(options);
Full Methods
WebuiPopovers.show(selector,options);
WebuiPopovers.hide(selector);
WebuiPopovers.hideAll();
WebuiPopovers.create(selector,options);
WebuiPopovers.isCreated(selector);
WebuiPopovers.updateContent(selector,newContent)
WebuiPopovers.updateContentAsync(selector,url)
WebuiPopovers.setDefaultOptions(options)
Welcome to visit my github page: [http://sandywalker.github.io/]