Bootstrap Popover Enhancement In jQuery Plugin – WebUI Popover

Tooltip
File Size: 7.4 KB
Views Total: 1196 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

A Free jQuery Plugin with WebUI Popover is a light weight & easy to use. tooltip Popup behavior on hover or on click display different-different position with help of this plugin. it used to extend the Bootstrap popover component with following advanced features. it is fully customize and many options are available related in popover.

Features :

  • Auto position.
  • More specific positions.
  • Custom triggers.
  • Multiple popovers at once.
  • Popover title.
  • Closeable popover.
  • Pop with any elements (table, list, iframe, etc…)
  • Custom callback events.

How to use it:

Add jQuery library and the jQuery WebUI Popover plugin at the bottom for faster page loading.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>	
<script src="dist/jquery.webui-popover.min.js"></script>

Add the jQuery WebUI Popover stylesheet.

<link rel="stylesheet" href="dist/jquery.webui-popover.min.css">

Add Html Code.

<a href="#" class="show-pop btn" data-placement="left">pop left</a>

Basic usage.

$('SELECTOR').webuiPopover(settings);

All the default settings.

// auto,top,right,bottom,left,top-right,
// top-left,bottom-right,bottom-left
placement:'auto',//values: 

container: null,

// can be set with number
width:'auto',
height:'auto',

// hover,click,sticky,manual
trigger:'click',

// custom styles
style:'',

// jQuery selector, if a selector is provided, popover objects will be delegated to the specified.
selector: false,  

// show and hide delay time of the popover
// works only when trigger is 'hover'
// the value can be number or object
delay: {
  show: null,
  hide: 300
},

async: {
  type: 'GET',
  //executed before ajax request
  before: function(that, xhr) {},
  // executed after successful ajax request
  success: success(that, data) {},
  //function(that, xhr, data){}
  error: null 
},

// if set to false,popover will destroy and recreate
cache:true,

// multiple popovers in page at same time
multi:false,

// show arrow or not
arrow:true,

// the popover title
title:'',

// content of the popover,content can be function
content:'',

// display close button or not
closeable:false,

// content padding
padding:true,

// if not empty ,plugin will load content by url
url:''

// 'html','iframe','async'
type:'html',

// ltr,rtl
direction: '', 

// custom animation
animation: null,

// custom template
template: '<div class="webui-popover">' +
    '<div class="arrow"></div>' +
    '<div class="webui-popover-inner">' +
    '<a href="#" class="close">x</a>' +
    '<h3 class="webui-popover-title"></h3>' +
    '<div class="webui-popover-content"><i class="icon-refresh"></i> <p>&nbsp;</p></div>' +
    '</div>' +
    '</div>',

// if backdrop is set to true, popover will use backdrop on open
backdrop: false,

// if popover can be dismissed by  outside click or escape key
dismissible: true,

// callbacks
onShow: null,
onHide: null,

// abort XHR
abortXHR: true,

// automatic hide the popover by a specified timeout, the value must be false,or a number(1000 = 1s).
autoHide: false,

// offset the top of the popover
offsetTop: 0,

// offset the left of the popover
offsetLeft: 0,

iframeOptions: {
  frameborder: '0',
  allowtransparency: 'true',
  id: '',
  name: '',
  scrolling: '',
  onload: '',
  height: '',
  width: ''
},

hideEmpty: false

Done

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like