Twitter Bootstrap 工具提示在 Slick 走马灯上

6
如何在Slick Carousel中显示Twitter Bootstrap工具提示?目前当我悬停在每个图像上时,工具提示在图像顶部,但无法显示,因为轮播的容器/包装器是绝对定位的。请注意保留html标签。

enter image description here

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

FIDDLE

http://jsfiddle.net/36zRU/

任何帮助都将不胜感激。

1
你是否找到了答案?我也遇到了同样的问题。 - ScoobaSteve
抱歉兄弟,但我仍在等待答案。 - Vincent Panugaling
我最终只是移动了弹出窗口的位置...我只花了一个小时左右尝试...但答案显然并不明显... - ScoobaSteve
你能为此创建一个 Fiddle 吗?或者在下面添加你的答案,谢谢! - Vincent Panugaling
1个回答

6

只需为每个图像添加data-container="body"属性即可Jsfiddle演示


太好了,直截了当的解决方案! - Jigar7521

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接