Twitter Boostrap滑動輪播的工具提示

如何在Slick Carousel中顯示Twitter Bootstrap工具提示？Twitter Boostrap滑動輪播的工具提示

至於現在當我徘徊每個圖像時，工具提示位於圖像的頂部，但無法顯示，因爲傳送帶的包裝/包裝處於絕對位置。

enter image description here

<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); 
}

FIDDLE

http://jsfiddle.net/36zRU/

任何幫助將大大appriciated

來源

2014-07-07 Vincent

好奇，如果你發現這個答案..我有同樣的麻煩 – ScoobaSteve

對不起哥哥，但我仍然在等待答案。 – Vincent

我最終只是移動了popover的位置......我只花了一個小時左右的努力......但答案肯定不是很明顯...... – ScoobaSteve

只需添加data-container="body"屬性爲每個圖像Jsfiddle Demo。

來源

2015-03-06 15:17:10

偉大的，直接的解決方案！ – Jigar7521

Twitter Boostrap滑動輪播的工具提示

回答

相關問題