JQuery pop-up information plug-in WebUI Popover tutorial

 

WebUI Popover is a lightweight jQuery pop-up information plug-in that works with Bootstrap to create some great new functions. Its use can be combined with Bootstrap, but it can also be used without Bootstrap, depends on jQuery plug-in version 1.7 +.
WebUI Popover lightweight jQuery pop-up information plug-in

Compatibility

WebUI Popover is perfectly compatible with the display effects in the following browsers:
Ie8 +
Chrome
Safari
Firefox
Opera

Usage

Introduce plug-in files

<Link rel = "stylesheet" href = "jquery.webui-popover.css">
...
<Script src = "jquery. js"> </script>
<Script src = "jquery. Webui-popover.js"> </script>

Use plug-ins

$ ('A'). webuiPopover (options );

Examples

Create a simple Popover

$ ('A'). webuiPopover ({title: 'title', content: 'content '});

Create a Popover and set the pop-up content value through DOM custom attributes

<A href = "#" data-title = "Title" data-content = "Contents..." data-placement = "right"> </a>
$ ('A'). webuiPopover ();

Pop-up window at the bottom

$ ('A'). webuiPopover ({title: 'title', content: 'content', placement: 'bottom '});

Features

Fast and lightweight
Supports more locations
Automatically calculated location
Close the pop-up button
Multiple pop-up entries on the same page
Different styles
Supports URL and iframe
Asynchronous mode supported
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
}