twitter-bootstrap - 你如何在 Twitter Bootstrap 的 popover 插件中禁用标题？

Question

我正在使用弹出框来显示不需要标题的图像。如果您不设置“标题”，它仍然会显示标题所在的区域。你如何完全关闭它？

Answer 1

baptme 的建议没问题，但更好的方法是指定弹出框的标题并实际上完全隐藏它，因为边距仍然存在，高度为 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>...'
});

我说不要删除它的原因是如果元素不存在，它可能会导致运行时错误。 见舍布罗的评论。

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>

Answer 4

简单的方法是height:0px在课堂上设置.popover-title而不使用data-original-title

CSS：

.popover-title { height: 0px;}

Answer 5

您还可以编写一个函数来删除元素：

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

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