如何在Twitter Bootstrap的popover插件中禁用标题？

Question

我正在使用popover来显示不需要标题的图像.如果您没有设置"标题",它仍会显示标题所在的区域.你怎么完全关闭它？

跟进:我希望答复者能够保持他们的观点,但我将最终的实施作为单独的答案发布在下面.

Answer 1

baptme的建议是可以的,但更好的方法是指定你的popover的标题并实际隐藏它,因为边距仍然存在,高度为0.

.popover-title { display: none; }

编辑:只是快速查看源代码,似乎有一个未记录的选项:

$.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

在Bootstrap 2.3+中,标题会自动隐藏,如果为空.

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

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>