2014-07-07 3 views
4

Comment afficher l'info-bulle Twitter Bootstrap dans Slick Carousel? Comme pour le moment où je planais chaque image, l'info-bulle est en haut de l'image mais elle ne peut pas être affichée car le contaner/wrapper du carrousel est positionné en absolu.Twitter Boostrap Tooltip sur le carrousel lisse

enter image description here

HTML Markup pour 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 pour Twitter Bootstrap infobulle

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

VIOLON

http://jsfiddle.net/36zRU/

Toute aide serait grandement appriciated

+1

Curieux si vous avez trouvé une réponse à cette question..J'ai le même problème – ScoobaSteve

+0

Désolé frère mais j'attends toujours la réponse. – Vincent

+0

J'ai fini par bouger la position de la popover ... Je n'ai passé qu'une heure ou plus à essayer ... mais la réponse n'est certainement pas évidente ... – ScoobaSteve

Répondre

5

Il suffit d'ajouter data-container="body" attribut pour chaque image Jsfiddle Demo.

+0

Super, solution droite! – Jigar7521

Questions connexes