如何禁用Twitter Bootstrap的popover插件中的標題？

Question

我使用彈出窗口來顯示不需要標題的圖像。如果您沒有設置「標題」，它仍會顯示標題所在的區域。你如何完全關閉它？

後續行動：我希望回答者保留他們的觀點，但我在下面單獨發佈了我的最終實施方案。

Answer 1

baptme的建議是好的，但更好的方法是指定您的popover標題，並且實際上將其完全隱藏，因爲邊距仍然存在，高度爲0.

.popover-title { display: none; } 

編輯：剛剛quicky看着源和似乎有一個未公開的選項：

$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { 
    placement: 'right' 
    , content: '' 
    , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
    }) 

當你使用JS宣佈你的酥料餅，儘量覆蓋模板，並指定一個隱藏的稱號。

$('#example').popover({ 
    template: '...<h3 class="popover-title" style="display: none"></h3>...' 
}); 

我之所以說不要刪除它是它可能會導致運行時錯誤如果元素不存在。 查看Sherbrow的評論。

Answer 2

簡單的方法是做設置height:0px在類.popover-title，並且不使用data-original-title

CSS：

.popover-title { height: 0px;} 

Answer 3

我使用@Terry和@Sherbow建議的技術組合結束了。顯示圖像，但不顯示標題（僅限於此彈出窗口）。

<a href="#" id="contributors" rel="popover">contributors</a> 

... 

<script> 
var contributor_img = '<img src="my_img/contributor.png" />' 


$(function() 
{ $('#contributors').popover({ 
    content: contributor_img, 
    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>' }); 
}); 
</script> 

Answer 4

您也可以編寫一個函數來刪除的元素：

function removeTitle(){ 
    $('.popover-title').remove(); 
} 

$("a[data-toggle=popover]") 
    .popover({ 
    html: true, 
    animation: true 
}) 
.click(function(e) { 
    removeTitle(); 
    e.preventDefault() 
}) 

Answer 5

在引導2.3+標題是空的自動隱藏。

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/