使Bootstrap Popover可點擊/ SetTimeout使用

Question

我試圖讓bootstrap的'popover'可點擊，因爲當我將鼠標懸停在其中時，它仍然保持打開狀態。

我設法使用這個腳本http://jsfiddle.net/CtuRx/5/得到這個工作。

但是當我通過jslint運行它時，它抱怨settimeout在它被定義之前被使用。

想知道是否有人可以提供/解釋更好的解決方案來創建和使用一個函數 - 在原始.btn類和.popover的mouseleave上定義和調用settimeout延遲。

謝謝！

Answer 1

Here's an alternate solution。

我用div封裝了你的按鈕。

當鼠標進入包裝div時，它會顯示彈出窗口並展開自身以爲鼠標提供一個橋接，以便在不觸發鼠標離開的情況下輸入彈出窗口。我們還在popover上放置了一個mouseleave，以便當我們離開popover時，wrapper div返回到默認寬度。

links.mouseenter(function (event) { 

    var link = $(this); 
    link.popover('show').width(180); 

    $('.popover').mouseleave(function() { 
     link.popover('hide').width(defaultWidth); 
    }); 
}); 

當鼠標離開按鈕，進入橋到酥料餅，我注意到在包裝MouseLeave事件觸發由於事件的冒泡。下面的代碼通過忽略鼠標事件來解決這個問題，除非我們將包裝器退出到主體。

links.mouseleave(function (event) { 
    if (event.toElement === document.body) { 
     $(this).popover('hide').width(defaultWidth); 
    }   
}); 

嘗試向包裝div添加邊框以查看實際的代碼。也。你應該考慮將你的CSS分隔開來，使它更具可讀性。