[英]Twitter Boostrap Tooltip on Slick Carousel
如何在Slick Carousel中顯示Twitter Bootstrap工具提示?
至於現在,當我徘徊每個圖像時,工具提示位於圖像的頂部,但由於轉盤的容器/包裝器位於絕對位置,因此無法顯示。
光滑輪播的 HTML標記
<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>
Twitter Bootstrap工具提示的HTML標記
<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);
}
小提琴
任何幫助都會受到極大的關注
只需為每個圖像Jsfiddle Demo添加data-container="body"
屬性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.