How do you disable the title in Twitter Bootstrap's popover plugin?

问题:

I'm using popover to display an image which doesn't require a title. If you don't set "title", it still displays an area where the title would be. How do you turn this off completely?

Follow up: I wanted the answerers to keep their points, but I posted my final implementation as a separate answer below.

回答1:

baptme's suggest is ok, but the better way would be to specify your popover's title and actually hide it completely as margins still exist with a height of 0.

.popover-title { display: none; } 

Edit: just quicky looked at the source and there seems to be an undocumented option:

$.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>'   }) 

When you declare your popover using JS, try to override the template and specify a hidden title.

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

The reason I say don't remove it is it may cause runtime errors if the element doesn't exist. See Sherbrow's comment.

回答2:

In Bootstrap 2.3+ the title automatically hides if empty.

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

回答3:

I wound up using a combination of the techniques suggested by @Terry and @Sherbow. Shows the image, but not the title (for this popup only).

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

回答4:

the easy way is to do set height:0px on the class .popover-title and don't use data-original-title

CSS:

.popover-title { height: 0px;} 

回答5:

You can also write a function to remove the element:

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

文章来源: How do you disable the title in Twitter Bootstrap's popover plugin?