How can I display the Twitter Bootstrap tooltip in Slick Carousel?

As for now when I hovered each image, the tooltip is on the top of the image but it can't be displayed because the contaner/wrapper of the carousel is in positioned absolute.

HTML Markup for 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 Markup for Twitter Bootstrap tooltip

<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

/

Any help would be greatly appriciated

How can I display the Twitter Bootstrap tooltip in Slick Carousel?

As for now when I hovered each image, the tooltip is on the top of the image but it can't be displayed because the contaner/wrapper of the carousel is in positioned absolute.

HTML Markup for 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 Markup for Twitter Bootstrap tooltip

<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/36zRU/

Any help would be greatly appriciated

• javascript
• jquery
• html
• css
• twitter-bootstrap

• 1 Curious if you found an answer to this..I'm having the same trouble – ScoobaSteve Commented Nov 13, 2014 at 1:29
• Sorry brother but I'm still waiting for the answer. – Vincent Panugaling Commented Nov 14, 2014 at 2:49
• I ended up just moving the position of the popover...I only spent an hour or so trying...but the answer certainly isn't obvious... – ScoobaSteve Commented Nov 15, 2014 at 5:35
• can you create a fiddle for that or maybe add your answer below, thanks! – Vincent Panugaling Commented Nov 15, 2014 at 8:17

1 Answer 1

Just add data-container="body" attribute for each image Jsfiddle Demo.