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