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

Question

I am using bootstrap 3.3 tooltips and have a problem with cropped / hidden tooltips. 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 are not what I want.

However, I want to set a specific style in .tooltip-inner only for a subset of the tooltips on the page. These tooltips, however, are now contained in the body , so the scope is more or less global.

I can only access .tooltip-inner for them using:

 body .tooltip-inner { background-color: #40a0d0; } 

or

 .tooltip-inner { background-color: #40a0d0; } 

How to install another data-container ? (I tried classes and identifiers). Or can someone suggest a way to limit the selection area .tooltip-inner ?

Answer 1

There is a way to add the css class to the tooltip based on which it is attached, even if you set data-container="body" in the element.

 $('.element1') .tooltip() .each(function() { $(this).data('bs.tooltip').tip().addClass('tooltip-class1'); }); 

See a working example here.

Answer 2

http://jsfiddle.net/62p0u2nr/ Try putting all of this in a div with a unique identifying name (I named my "yep").

Now do data-container="yep"

Now .tooltip-inner is available directly from 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> 

Answer 3

Having this problem in an Angular 4 project. Looking at the Bootstrap 3 document again, I see there an API called a template that can be used to override the default classes. Here is what I will 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*/ } 

For your information - using the data-template attribute should also work in non-angular projects.