I am using bootstrap 3.3 tooltips and had an issue with the tooltips being cropped/hidden. I solved this by setting data-container="body"
.
<!--...-->
<span class="callOutImg">
<a href="#" data-toggle="tooltip" data-container="body" data-placement="top" class="optionTooltip" title="Hello my name is Inigo Montoya">
<img src='/images/info-bubble-big.png' />
</a>
</span>
<!--...-->
Using these effects all of my tooltips - which is not what I want.
However, I want to set a specific style on the .tooltip-inner only for a subset of tooltips on the page. These tooltips are now however contained in body
so the scope is more or less global.
I can only access .tooltip-inner for these using:
body .tooltip-inner {
background-color: #40a0d0;
}
or
.tooltip-inner {
background-color: #40a0d0;
}
How do I set a different data-container
? (I have tried classes and id's) Or can anyone suggest a way to limit the scope of .tooltip-inner
selection?
There is a way to add a css class to a tooltip based on which element it is attached to, even if you have set data-container="body"
on the element.
$('.element1')
.tooltip()
.each(function() {
$(this).data('bs.tooltip').tip().addClass('tooltip-class1');
});
See a working example here