Gavin-YYC / webui-popover

A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features

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

##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',closeable:true});

Create and Animate the Popover

$('a').webuiPopover({title:'Title',content:'Content',animation:'pop'});

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;
 						});

default options

{
	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
	constrains:null, // constrains the direction when placement is  auto,  values: horizontal,vertical
	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: {
	    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 not empty ,plugin will load content by url
}