javascript - Bootstrap popover without title - Stack Overflow

admin管理员组

文章数量:1410724

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.

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.

• javascript
• jquery
• css
• twitter-bootstrap

Share Improve this question Follow edited May 23, 2017 at 11:57 CommunityBot 111 silver badge asked Aug 28, 2013 at 15:02 ALBIALBI 72133 gold badges1616 silver badges3434 bronze badges 5

• show your exact code or similar example .. Cannot possible guess what is wrong without it :) – davidkonrad Commented Aug 28, 2013 at 15:06
• @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 Commented Aug 28, 2013 at 15:11
• 1 @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 Commented Aug 28, 2013 at 15:17
• @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 Commented Aug 29, 2013 at 4:38
• 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 Commented Aug 29, 2013 at 9:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 :)

You can specify the template for a popover using the admittedly undocumented template option. This is described in one of the answers to the question you posted (not the accepted one). I'd use this method if it's only for some popovers on the page.

Edit: this has some drawbacks of course: updating bootstrap means making sure your template still fits, which is exactly the reason this option is not documented (I imagine).

本文标签： javascriptBootstrap popover without titleStack Overflow