bootstrap-popover的配置與靈活應用

首先羅列一下配置參數：

1、animation true/false 是否動畫

2、placement 'right'/'left'/top/bottom/function(){return 'right'} 彈出提示的位置

3、selector 目標對象

4、trigger 'hover'/'click'... 觸發方式

5、title 標題 如果元素沒有指定data-original-title屬性，則使用這個默認值

6、content 內容 如果元素沒有指定data-content屬性，則使用這個默認值

7、delay 顯示和隱藏的時間 20/{show:200,hide:300}

 

然后列舉一下，我們日常開發中會遇到的問題：

1、如果我要默認為鼠標點擊觸發事件如何處理？

$('a').popover({
    trigger : 'click'
});

 

2、如果我要點擊非目標對象關閉提示層怎么辦？

說明：每個提示會生成一個class為popover的div容器，因此只需要在body上綁定一個click事件實現對class為popover的div銷毀即可。值得注意的是，目標對象的click事件的冒泡要取消掉。

(function(){
    $body.find('.popovers').each(function(){
        $(this).click(function(e){
            $('.popover').remove();
            e.preventDefault();
            return false;
        });
        $(this).popover({
            trigger : 'click'
        });
    });
    $body.click(function(){
        $('.popover').remove();
    });
})();