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?

Explanatory

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

Rottenstone

Answer 2

http://jsfiddle.net/62p0u2nr/ Try putting all that in a div with a unique ID name (I called mine "yep").

Now make the data-container="yep"

Now the .tooltip-inner is accessible straight away from the css.

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.tooltip-inner {
  background-color: #40a0d0;
}

<div id="yep">
  <span class="callOutImg">
    <a href="#" data-toggle="tooltip" data-container="yep" data-placement="top" class="optionTooltip" title="Hello my name is Inigo Montoya">
      <img src="http://placehold.it/350x150" />

    </a>
  </span>
</div>

Dreiser

But in this case, your css will select all tool tips on the page. If I use #yep .tooltip-inner{} it doesn't work – Explanatory

Answer 3

Having this issue in an Angular 4 project. By going through Bootstrap 3's document again I see there's an API called 'template' which can be used to override default classes. Here is what I come up with:

In JS:

// inject customized class into this tooltip so we can style it in global css without impact other tooltips.
    const tooltipTemplate = `
    <div class="tooltip" role="tooltip">
        <div class="tooltip-arrow my-tooltip-arrow"></div>
        <div class="tooltip-inner my-tooltip-inner"></div>
    </div>`;

    $('[data-toggle="tooltip"]').tooltip({
        template: tooltipTemplate
    });

Then in my global CSS:

.tooltip-inner.my-tooltip-inner {
   max-width: 500px;
   background: #f2f2f2;
   /*do whatever you want*/
 }

FYI - I believe using data-template attribute should also work in non-Angular projects

Involved