Twitter Boostrap Tooltip on Slick Carousel

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.net/36zRU/ Any help would be greatly appriciated