Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

webui-popover

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

webui-popover

A enhancement popover plugin for Bootstrap ,but you can use it stand-alone without Bootstrap!

  • 1.2.5
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
11K
increased by4.04%
Maintainers
1
Weekly downloads
 
Created
Source

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

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

default options

{
	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/]

Keywords

FAQs

Package last updated on 17 Dec 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc