bootstrap popover 如何在hover状态移动到弹出上不消失

bootstrap中的popover其实就是对tooltip做了一定升级，拥有了标题和内容

概要

• 使用的时候依赖第三方插件
• 依赖tooltip插件
• 必须初始化
• title 和 content 可以在popover上展示
• 指定 container：'body'属性，它就会在body中生成相应的div,也可以局限在某个元素中
• 含有 display的无法显示出popover
• 内容和标题没有的时候不会显示popover
• 当在多行文本中展示的时候，popover会居中，可以使用 white-space

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

配置

名字	类型	默认值	描述
animation	boolean	true	允许使用动画
container	string	false	popover在哪个元素中的后面展示
content	string or element or element	''	如果元素中存在 data-content属性就不起作用，如果使用function,需要return html内容
delay	number	0	延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用 delay:{ show: 500, hide: 100 }
html	boolean	false	向弹出框插入 HTML
placement	string or function	'right'	top or bottom or left or right 也可以使用auto 也可以用 function 第一个参数是弹出的dom,第二个参数是触发的dom
selector	string	false	提供了一个选择器，弹出框对象将被委派到指定的目标
template	string	' '	html属性为true,可以修改popover的模板
title	string or function or element	''	同content
trigger	string	'click'	可以指定不同的触发事件 click hover focus manual 其中manual不能和任何一起使用

方法

事件

实现

上面已经介绍了popover的很多东西，来具体看看如何实现

$(".pop").popover({ trigger: "manual" , html: true, animation:false})
    .on("mouseenter", function () {
        var _this = this;   // 这里的this触发的dom,需要存起来 否则在下面 .popover的逻辑中this会变为弹出的dom
        $(this).popover("show");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide'); 
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 300);
});

demo http://jsfiddle.net/mayufo/369dp5sy/2/

参考资料

https://v4-alpha.getbootstrap.com/components/popovers/
http://www.runoob.com/bootstrap/bootstrap-popover-plugin.html

转载于:https://www.cnblogs.com/mayufo/p/7094496.html