Блог

Как я могу отобразить всплывающую подсказку Twitter Bootstrap в Slick Carousel?

На данный момент, когда я наводил курсор на каждое изображение, всплывающая подсказка находится в верхней части изображения, но она не может быть отображена, потому что содержимое / оболочка карусели находится в абсолютном положении.

HTML разметка для Slick Carousel

 <div class="slider center slick-initialized slick-slider">
    <div class="slick-list draggable">
        <div class="slick-slide slick-cloned" style="width: 197px;">
            <img src="assets/css/images/paid-ad-2.jpg" class="img-responsive" data-toggle="tooltip" data-placement="top" title="" data-original-title="Aparment Unit in Arkansas">
        <div class="slick-slide slick-cloned" style="width: 197px;">
            <img src="assets/css/images/paid-ad-2.jpg" class="img-responsive" data-toggle="tooltip" data-placement="top" title="" data-original-title="Aparment Unit in Arkansas">
        </div><!-- And so on... -->
    </div>
</div> 
  

HTML разметка для всплывающей подсказки Twitter Bootstrap

 <div class="tooltip fade top in" style="display: block; top: -32px; left: 49px;">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Hidden tooltip</div>
</div>
  

CSS

 .slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}
.tooltip {
    position: absolute;
    z-index: 1030;
    display: block;
    visibility: visible;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    filter: alpha(opacity=0);
}
  

СКРИПКА

http://jsfiddle.net/36zRU/

Любая помощь была бы высоко оценена

Просто добавьте data-container="body" атрибут для каждого изображения в демонстрационный файл Jsfiddle.