Is there a way to specifically target a container with CSS selectors?
I attempted to apply CSS changes to help icon1 only, and not help icon2.
The specific CSS changes I want to make to the help icon1 popover are: Set the title (h6) to red color and limit the maximum width of the Popover Container to 385px
Visit this link for an example.
$('.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>
Title in Red. </h6>
<ul>
<li>Apply max-width of 385px to the Popover Container.</li>
<li>Example 1.</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>
Title in Black </h6>
<ul>
<li>No specific width applied to the Popover Container.</li>
<li>Example 2.</li> </ul>
</div></div>