最近项目有点多，日记没多少时间写。哈哈。
今天介绍一款好用的提示控件 webui-popover
像popover（弹出框）这样的插件用处很广，基本所有的社交网站都有。Bootstrap自带的popover.js就实现了这个功能。但是在使用了几天之后就发现Bootstrap的popover做的不够好，使用效果跟当前的主流网站还有点差距。
于是今天就介绍一个更优秀的popover：webui-popover，它兼容bootstrap但并不依赖于bootstrap。
1.文档官网：
gitthub地址：https://github.com/sandywalker/webui-popover 更多方法可以前往查看挖掘
demo示例：http://sandywalker.github.io/webui-popover/demo/#
和Bootstrap的popover相比，它有一个显著的优点：支持异步加载。
2.特点
-
快，轻量
-
支持更多的位置
-
自适应位置
-
弹出框可以带关闭按钮
-
同一个页面可以有多个弹出框
-
不同风格
-
支持URL和iframe
-
支持异步模式
-
多个动画
-
支持背景高亮
3.使用：
伸手链接（需要修改文档可以复制链接下载本地使用修改）：
Cdn 云样式
css:
<link href="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.css" rel="stylesheet">
js:
/*前提使用*/
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.js"></script>如下使用此插件
$('#id').webuiPopover(options);3.1、文档给出的一些例子
最简单的Popover。
$('#id').webuiPopover({title:'Title',content:'Content'});通过dom元素的data-* 属性创建Popover。
html:
<a href="#" data-title="Title" data-content="Contents..." data-placement="right">show pop</a>
jq:
$('a').webuiPopover();Popover的内容可以通过为它的下一个元素设置 'webui-popover-content' class来指定。
html:
<a href="#" >shop pop</a>
<div class="webui-popover-content">
<p>popover content</p>
</div>
jq:
$('a').webuiPopover();或者使用jQuery选择器（推荐id选择器）来设置Popover的内容。
html:
<a href="#" >shop pop</a>
<div id="myContent">
<p>popover content</p>
</div>
jq:
$('a').webuiPopover({url:'#myContent'});
指定Popover弹出的位置。由mouse hover触发的Popover。
$('#id').webuiPopover({content:'Content',trigger:'hover'});
/*这个是比较常用的*/
/*鼠标经过 显示 提示*/
/*content ： 可以是文字，也可以是html代码。例如<img src="xxx.jpg" style="width:200;height:400;">*/
/*则会显示一张图片*/创建一个Sticky Popover（Popover创建之后总是显示）
$('#id').webuiPopover({content:'Content',trigger:'sticky'});动态的创建Popover (by new option:'selector').
<a href="#" id="addPop" class="btn btn-default"> add Pop </a>
<div class="pops">
</div>
JQ:
$('#id').on('click',function(e){
$('<a href="#" class="show-pop data-placement="auto-bottom" data-title="Dynamic Title" data-content="Dynamic content"> Dynamic created Pop </a>').appendTo('#id');
});宽高固定的Popover
$('#id').webuiPopover({content:'Content',width:300,height:200});带关闭按钮的Popover
$('#id').webuiPopover({title:'Title',content:'Content',closeable:true});Popover动画
$('#id').webuiPopover({title:'Title',content:'Content',animation:'pop'});iframe类型的Popover
$('#id').webuiPopover({type:'iframe',url:'http://getbootstrap.com'});手动触发Popover
//Initailize
$('#id').webuiPopover({trigger:'manual'});
...
//Show it
$('#id').webuiPopover('show');
//Hide it
$('#id').webuiPopover('hide');销毁Popover
$('#id').webuiPopover('destroy');默认选项
{
placement:'auto',//位置: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,auto-top,auto-right,auto-bottom,auto-left,horizontal,vertical
container: document.body,// 将在其中添加Popover的容器。 (i.e. 父滚动区域). 可能是jQuery对象、选择器字符串或HTML元素. 参考：https://jsfiddle.net/1x21rj9e/1/
width:'auto',//数值则固定宽度
height:'auto',//数值固定高度
trigger:'click',//触发方式: click,hover,sticky(始终在创建popover之后显示);
selector:false,// jQuery selector, 如果提供了选择器，则popover对象将委托给指定的选择器
style:'',
animation:null, //动画values: pop,fade (只在支持CSS 3转换的浏览器中生效)
delay: {//显示和隐藏弹出器的延迟时间，只有在触发器“悬停”时才能工作，该值可以是数字或对象。
show: null,
hide: 300
},
async: {
type:'GET', //AJAX请求方法类型，默认值为GET
before: function(that, xhr) {},//在Ajax请求之前执行
success: function(that, data) {}//在Ajax请求成功后执行
error: function(that, xhr, data) {} //在错误的ajax请求后执行
},
cache:true,//如果缓存设置为false，则popover将销毁并重新创建
multi:false,//是否允许页面中的其他弹出框同时出现
arrow:true,//显示箭头或不显示箭头
title:'',//如果标题设置为空字符串，则标题栏将自动隐藏。
content:'',//内容的弹出，内容可以是文字，或者html代码。
closeable:false,//关闭按钮
direction:'', // 内容方向，默认ltr ,也可以是:'rtl';
padding:true,//内间距填充
type:'html',//值有:'html','iframe','async'
url:'',//如果类型等于‘html’，则值应该是jQueryselecor。如果类型等于“异步”，则插件将通过url加载内容。
backdrop:false,//如果背景设置为true，则popover将在打开时使用背景。
dismissible:true, //如果可以通过外部单击或转义键解除弹出
autoHide:false, //用指定的超时自动隐藏弹出，该值必须为false，或数字(1000=1s)
offsetTop:0, //
offsetLeft:0, //
onShow: function($element) {}, // 弹出后调用
onHide: function($element) {}, // 隐藏是调用
}