Remove Twitter Bootstrap Popover Title

January 25th, 2013 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.

I’ve been experimenting with the Twitter Bootstrap framework over the past few days and I must say, I love it. One of the main features that I’m using is the popover functionality which results in a popup fading in when you hover over or click on specified elements.

There was something however that I couldn’t acheive by using the standard set of options available; that was to not show the title bar. I personally feel that if the ‘title’ attribute is left empty then the grey title bar shouldn’t show. As it is, you’ll be left with a blank bar where the title should appear.

The Solution

I managed to hide the title bar by finding out the class that was applied to it and adding some custom CSS like so:

.popover-title { display: none; }

Note that this will hide all titles in all popovers throughout the webpage. If we only want to hide the title in a certain scenario it might be more preferable to only make it apply within a specific element. Something like so:

#my-outer-element .popover-title { display: none; }

Tags: ,
This entry was posted on Friday, January 25th, 2013 at 12:54 pm by +Steve Marks and is filed under (X)HTML / CSS, Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first