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>

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()
})

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

5 个答案: