Bootstrap popover without title

Question

I am using bootstrap popovers.There are many popovers on the page and in one of the popover , I dont want to display the title,when I dont give Title, it still shows that area where the title would have been. Found an answer on How do you disable the title in Twitter Bootstrap's popover plugin?

but cant give css : display:none to popover-title class since that would hide title from all other popovers also.

What should be the correct way to do this? Thanks in advance.

show your exact code or similar example .. Cannot possible guess what is wrong without it :) — davidkonrad
@davidkonrad I think it's pretty clear without code. Adding the css rule to the popover-title class would affect all pop-overs on the page, but he only wants to remove the title from one popover. — Paul
@Paulpro, yes - but if I'm not defining data-title on a popover-element, the title is not shown! (not even an empty title, as expected) So there must be something else going on with his code — davidkonrad
@davidkonrad , but when i dont define title, it still shows the space.. prob got solved nw by overriding the template: 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>' — ALBI
Hey @user2688204 - great! you should consider answering your own question below (where you describe your solution) and mark it as accepted. This would be perfect. Others could may benefit from your effort and perhaps upvote your answer when they search for answers .. — davidkonrad

ALBI ALBI · Accepted Answer · 2013-08-29T10:00:13

Thanks.. got it worked by overriding the template

showpopover=function(message,context){
    var popover_message="<div>"+message+"</div>";
    //$(a).hide();
    $popover=$(context).popover({ placement:"bottom",trigger:"hover",template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>',content:popover_message}).popover('show'); 
};

how i called the function is here:

html = html + "<td onmouseover=\"showpopover('"+main_image_data['score_reason']+"',this)\"><center>"+main_image_data['bonus']+"</center></td>";

It works :)

Bootstrap popover without title

2 Answers