Bootstrap tooltip data-container = gövde ve css'nin kapsamını .tooltip-iç üzerinde

Question

Bootstrap 3.3 araç ipuçlarını kullanıyorum ve araç ipuçları kırpılmış/gizli bir sorunla karşılaştım. Bunu data-container="body" ayarlayarak çözdüm.

<!--...--> 
<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> 
<!--...--> 

Bu efektleri tüm araç ipuçlarını kullanarak - istediğim gibi değil. Ancak, sayfadaki araç ipuçlarının yalnızca bir alt kümesi için .tooltip-internal üzerinde belirli bir stil ayarlamak istiyorum. Bu araç ipuçları şimdi body'da yer almaktadır, bu yüzden kapsam az ya da çok globaldir.

elimden sadece erişim bu kullanmak için .tooltip-iç:

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

veya farklı bir data-container nasıl ayarlarım

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

? (Sınıfları ve kimlikleri denedim) Veya herkes .tooltip-inner seçiminin kapsamını sınırlamak için bir yol önerebilir mi?

Answer 1

http://jsfiddle.net/62p0u2nr/ Tüm bunları benzersiz bir ID adıyla bir div içine koymayı deneyin ("yep" sözcüğünü aradım).

Şimdi Şimdi .tooltip-inner hemen css erişilebilir data-container="yep"

olun.

@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

Eğer elemana data-container="body" ayarlanmış olsa bile, bağlı olduğu hangi eleman dayalı bir araç ipucu bir css sınıfı eklemek için bir yol yoktur.

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

çalışan bir örnektir here