Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Apply CSS to popover in Bootstrap

I want to apply custom CSS to the title and content of a popover in Bootstrap, however, it seems that my CSS is being ignored.

How can I apply specific CSS to the title and the content respectively?

$("#poplink").popover({      html: true,      placement: "right",      trigger: "hover",      title: function () {          return $(".pop-title").html();      },      content: function () {          return $(".pop-content").html();      }  });
html, body {      width: 100%;      height: 100%;  }  .pop-div {      font-size: 13px;      margin-top: 100px;  }  .pop-title {      display: none;      color: blue;      font-size: 15px;  }  .pop-content {      display: none;      color: red;      font-size: 10px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <div class="pop-div">      <a id="poplink" href="javascript:void(0);">Pop</a>      <div class="pop-title">Title here</div>      <div class="pop-content">Content here</div>  </div>

For example: http://jsfiddle.net/Mx4Ez/

like image 491
MLister Avatar asked Jul 26 '13 14:07

MLister


People also ask

How do I style bootstrap popover?

If you have multiple popovers on your page and only want to style one of them, you can leverage the popover's template option to add another class: $("#myElement"). popover({ template: '<div class="popover my-specific-popover" role="tooltip">...' });

How do you make a popover CSS?

How To Create a Popover. To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

How do I show popover in bootstrap 5?

To create a popover, add the data-bs-toggle="popover" attribute to an element. Note: Popovers must be initialized with JavaScript to work.


2 Answers

The reason appears to be that the javascript is creating brand new elements to display the popover itself. These new elements have different css class names than the original.

Try adding this to your css:

.popover-title {     color: blue;     font-size: 15px; } .popover-content {     color: red;     font-size: 10px; } 

Update

Depending on the library version you're using, the names may be different. If the above does not work, try using .popover-header and .popover-body instead.

like image 102
Matt Pinkston Avatar answered Sep 22 '22 14:09

Matt Pinkston


The newly created elements have the following hierarchy:

.popover     |_  .popover-title     |_  .popover-content 

Which is injected after the element that triggers the popover (you can specify a specific container for the injected popover by setting the container option, in which case you will set the styles using the element that you passed as container). So to style a popover you can use css like the following example:

<div id="my-container">   <a href="#" id="popover-trigger">Popover This!</a> </div>  <style>   .popover-title { color: green; }  /* default title color for all popovers */    #my-container .popover-title { color: red; }  /* specific popover title color */ </style> 
like image 21
isapir Avatar answered Sep 23 '22 14:09

isapir