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

Question

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?

Terry · Accepted Answer · 2012-06-27T14:56:23.910

41

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.

edited Jun 27 '12 at 14:56

answered Jun 27 '12 at 12:30

Terry

14,099
9
56
84

If the popover is $('#example').popover(options), then what's the CSS to go to this element id and not all popover titles? – Scott C Wilson Jun 27 '12 at 13:51
The popover element is created on mouseover and destroyed on mouseleave. You can't specifically target that element. See my edit for a possible solution – Terry Jun 27 '12 at 13:58
3

@Terry you can remove it, since it's used with a jQuery selector : http://jsfiddle.net/Sherbrow/3GMnz/ – Sherbrow Jun 27 '12 at 14:18
2

@Terry major +1 for making us aware of the undocumented `template: ` option – tim peterson Feb 26 '13 at 03:40

score 11 · Answer 2 · answered Apr 16 '13 at 14:19

11

In Bootstrap 2.3+ the title automatically hides if empty.

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

answered Apr 16 '13 at 14:19

isherwood

58,414
16
114
157

score 5 · Answer 3 · answered Jul 02 '12 at 11:16

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>

score 1 · Answer 4 · answered Jun 27 '12 at 12:22

1

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

answered Jun 27 '12 at 12:22

baptme

10,062
3
52
57

score 0 · Answer 5 · answered Mar 29 '13 at 14:16

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?

5 Answers5

Linked