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
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'});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
//Initailize
$('a').webuiPopover({trigger:'manual'});
...
//Show it
$('a').webuiPopover('show');
//Hide it
$('a').webuiPopover('hide');{
placement:'auto',//values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,auto-top,auto-right,auto-bottom,auto-left,horizontal,vertical
width:'auto',//can be set with number
height:'auto',//can be set with number
trigger:'click',//values: click,hover,manual(handle events by your self),sticky(always show after popover is created);
style:'',//values:'',inverse
animation:null, //pop with animation,values: pop,fade (only take effect in the browser which support css3 transition)
delay: {//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
show: null,
hide: 300
},
async: {
type:'GET', // ajax request method type, default is GET
before: function(that, xhr) {},//executed before ajax request
success: function(that, data) {}//executed after successful ajax request
},
cache:true,//if cache is set to false,popover will destroy and recreate
multi:false,//allow other popovers in page at same time
arrow:true,//show arrow or not
title:'',//the popover title ,if title is set to empty string,title bar will auto hide
content:'',//content of the popover,content can be function
closeable:false,//display close button or not
padding:true,//content padding
type:'html',//content type, values:'html','iframe','async'
url:'',//if type equals 'html' , value should be jQuery selecor. if type equels 'async' the plugin will load content by url.
backdrop:false,//if backdrop is set to true, popover will use backdrop on open
dismissible:true, // if popover can be dismissed by outside click or escape key
autoHide:false, // automatic hide the popover by a specified timeout, the value must be false,or a number(1000 = 1s).
offsetTop:0, // offset the top of the popover
offsetLeft:0 // offset the left of the popover
}Welcome to visit my github page: [http://sandywalker.github.io/]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent