Bootstrap tooltip data-container=body and limit scope of css on .tooltip-inner

Question

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?

Answer 1

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