How do you disable the title in Twitter Bootstrap's popover plugin?
Solution 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.
Solution 2
In Bootstrap 2.3+ the title automatically hides if empty.
http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/
Solution 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>
Solution 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;}
Scott C Wilson
Focused on ecommerce. Most of my work is on Zen Cart, but I also work on other shopping carts like: OpenCart osCommerce BigCommerce Shopify I think StackOverflow is a great resource, and I'm #SOreadytohelp.
Updated on July 17, 2022Comments
-
Scott C Wilson almost 2 years
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?