Search code examples
twitter-bootstrappopovertwitter-bootstrap-2

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?


Solution

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