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
##Demo WebUI Popover Demo
##Getting Started
####Including it on your page
<link rel="stylesheet" href="jquery.webui-popover.css">
...
<script src="jquery.js"></script>
<script src="jquery.webui-popover.js"></script>####Use the plugin as follows:
$('a').webuiPopover(options);####Some Examples:
Create 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"></a>$('a').webuiPopover();Create Popover with bottom placement
$('a').webuiPopover({title:'Title',content:'Content',placement:'bottom'});Create Popover trigged by mouse hover
$('a').webuiPopover({title:'Title',content:'Content',trigger:'hover'});Create inversed style Popover
$('a').webuiPopover({title:'Title',content:'Content',style:'inverse'});Create Popover with fixed width and height
$('a').webuiPopover({title:'Title',content:'Content',width:300,height:200});Create Popover with close button
$('a').webuiPopover({title:'Title',content:'Content',closable:true});Create Popover with iframe
$('a').webuiPopover({type:'iframe',url:'http://getbootstrap.com'});Create Popover 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;
});{
placement:'auto',//values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left
width:'auto',//can be set with number
height:'auto',//can be set with number
trigger:'click',//values:click,hover
style:'',//values:'',inverse
delay:300,//delay time of the popover, works only when trigger is 'hover'
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 not empty ,plugin will load content by url
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent