Set maximum width and css color for the specific (not all) popover container (help icon1)

Question

I am wondering how to apply CSS selectors to a specific container.

I tried to apply the following CSS change to the help icon1 and not help icon2.

The CSS change that I would like to apply to helpicon1 popover are:- h6 red color and Set max width of Popover Container to 385px

http://jsfiddle.net/E5Ly5/683/

$('.ico').popover({
    placement: 'bottom',
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
    }
});

$('.icon2').popover({
    placement: 'bottom',
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
    }
});

body {
    padding: 50px;
}
.popover-title {
    color: blue;
    font-size: 15px;
}
.popover-content{
  max-width:385px;
}
  div.test div.hide h6{
    color: red;
    font-size: 10px;
} 

 <div class="test"> 
               <i class="fa fa-question-circle ico" 
               data-toggle="popover"  data-placement="right" 
               data-trigger="hover" >help icon1</i>
               
<div class="popper-content hide"><h6>
Red color Title. </h6>
  <ul>
    <li>Popover container apply max -width: 385px</li>
    <li> test1.</li>
  </ul>
</div></div>      

<div class="test"> 
               <i class="fa fa-question-circle icon2" 
               data-toggle="popover"  data-placement="right" 
               data-trigger="hover" >help icon2</i>
               
<div class="popper-content hide"><h6>
Black color title </h6>
  <ul>
    <li>Popover Container no specific width.</li>
    <li>Test2.</li> </ul>
</div></div>      
      

Answer 1

What you are trying to do cannot be done with the way you are loading the content. The bootstrap popover element renders the popper-content in a different part of the DOM that cannot be targeted.

Why not simply attach a class that contains color:red directly on the h6 you want?

Here is a fiddle: http://jsfiddle.net/E5Ly5/684/