Bootstrap tooltip data-container = ambito body e limit di css su .tooltip-inner

Question

Sto usando i tooltip di bootstrap 3.3 e ho riscontrato un problema con i tooltip che vengono ritagliati/nascosti. Ho risolto questo impostando 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> 
<!--...--> 

L'utilizzo di questi effetti tutti i miei tooltip - che non è quello che voglio.

Tuttavia, desidero impostare uno stile specifico su .tooltip-inner solo per un sottoinsieme di suggerimenti sulla pagina. Questi tooltip sono ora contenuti in body quindi l'ambito è più o meno globale.

posso solo accesso .tooltip-interno per questi utilizzando:

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

o

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

Come faccio a impostare un diverso data-container? (Ho provato classi e id) O qualcuno può suggerire un modo per limitare l'ambito della selezione .tooltip-inner?

Answer 1

http://jsfiddle.net/62p0u2nr/ Prova a mettere tutto in un div con un nome ID univoco (ho chiamato il mio "sì").

Ora fanno il data-container="yep"

Ora il .tooltip-inner è accessibile subito dalla 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 2

C'è un modo per aggiungere una classe CSS per un tooltip sulla base di quale elemento si è attaccato al, anche se è stata impostata data-container="body" sull'elemento.

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

Vedi un esempio di lavoro here