jQuery: положение всплывающей подсказки, используемой в слайдере

Question

Я использую jQuery Tooltip и jQuery Slider (jQueryUI) в то же время. Ползунок отлично работает. Но после прокрутки всплывающие подсказки отображаются в неправильном положении (загрузка screenshot или source). Я думаю, это из-за неправильного CSS ...

Почему некоторые подсказки не отображаются в правильном положении?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script> 

<style type="text/css"> 
    body { margin:0; padding:0;} 

    #sliderContent { 
     width:955px; 
     height: 300px; 
     background-color:#f00; 
     overflow: hidden; 
    } 
    .viewer { 
     width:955px; 
     height:300; 
     overflow:hidden; 
     background: #ff0; 
     position:relative; 
    } 
    .content-conveyor { 
     width:955px; 
     height:300px; 
     background: #0ff; 
     position:relative; 
     overflow: hidden; 
    } 
    .teamitem { 
     width:304px; 
     height: 300px; 
     float:left; 
     font-family:Tahoma; 
     text-align:center; 
    } 
    #sliderwrap { 
     position: relative; 
     top: -50px; 
     left: 400px; 
     width: 150px; 
     padding: 5px 30px; 
     z-index: 99999; 
     background: url(fileadmin/media/_statics/slider-bg.png); 
    } 
    #slider { 
     /*nothing here*/ 
    } 
    .ui-slider .ui-slider-handle { 
     /* see jQuery-UI-CSS */ 
    } 

    /*///////////////////////////*/ 
    /*///////////////////////////*/ 
    ul.team { 
     display: block; 
     overflow: hidden; 
     height: 300px; 
     /* max width here, for users without javascript */ 
     width: 15000px; 
     /* removing default styling */ 
     margin: 0; 
     padding: 0; 
     background: url(fileadmin/media/_statics/teamnavigation-bg.jpg) left top repeat-x;  
     list-style: none; 
    } 
    .team li { 
     margin-right: 10px; 
     display: block; 
     float: left; 
     padding: 0; 
     width: 155px; 
     height: 300px; 
    } 
    .team a { 
     display: block; 
     text-decoration: none; 
    } 
    .team span { 
     display: none; 
     margin-top: 3px; 
     text-align: center; 
     font-size: 12px;  
     color: #fff; 
    } 
    .team a:hover span { 
     display: block; 
    } 

    .team img { 
     border: 0; 
    } 
    .normal { 
     position: relative; 
     z-index: 10; 
     cursor: pointer; 
    } 
    .action { 
     position: relative; 
     z-index: 8; 
     top: -300px; 
    } 
    /*///////////////////////////*/ 
    /*///////////////////////////*/ 
    .tooltip { 
     postition: absolute; 
     float: left; 
     display:none; 
     background: url('fileadmin/media/_statics/tooltip.png') no-repeat; 
     width:175px; 
     height:80px; 
     font-size:11px; 
     color:#fff; 
     z-index: 999999; 
    } 
     .name { 
      font-size: 13px; 
      font-weight: bold; 
      color: #efefef; 
      letter-spacing: 0.01em; 
      margin-top: 10px; 
     } 
     .function { 
      font-size: 9px; 
      color: #b8b8b8; 
      letter-spacing: 0.1em; 
      text-transform: uppercase; 
      margin-top: 3px; 
     } 
</style> 

<script src="http://cdn.jquerytools.org/1.2.3/full/jquery.tools.min.js"></script> 
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script> 
<link rel="stylesheet" type="text/css" href="jqueryui/css/smoothness/jquery-ui-1.7.2.custom.css"> 

<script> 
    // What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready 
    $(document).ready(function() { 

     //////////////////////////////////////////////////////////////// 
     // CHANGE IMAGES 
     //////////////////////////////////////////////////////////////// 
     $(".team li img.action").css("opacity", 0); 


     $(".team li img.normal").mouseover(function() 
     { 
      $(this).animate({opacity: 0}, 200); 
      $(this).next().next().animate({opacity: 1}, 200); 
     }); 
     $(".team li img.normal").mouseout(function() 
     { 
      $(this).animate({opacity: 1}, 200); 
      $(this).next().next().animate({opacity: 0}, 200); 
     }); 



     //////////////////////////////////////////////////////////////// 
     // TOOLTIP 
     //////////////////////////////////////////////////////////////// 
     $(".team li img.normal").tooltip({ 
      effect: 'fade', 
      offset: [85, 20] 
     }); 



     //////////////////////////////////////////////////////////////// 
     // SLIDER 
     //////////////////////////////////////////////////////////////// 
     //vars 
     var conveyor = $(".content-conveyor", $("#sliderContent")), 
     teamitem = $(".teamitem", $("#sliderContent")); 

     //set length of conveyor 
     conveyor.css("width", teamitem.length * parseInt(teamitem.css("width"))); 

     //config 
     var sliderOpts = { 
      max: (teamitem.length * parseInt(teamitem.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")), 
      animate: false, 
      slide: function(e, ui) { 
      conveyor.css("left", "-" + ui.value + "px"); 
      } 
     }; 

     //create slider 
     $("#slider").slider(sliderOpts); 


    }); 
</script> 



<div id="sliderContent"> 
    <div class="viewer"> 
     <div class="content-conveyor"> 
      <ul class="team"> 
       <li class="teamitem"> 
        <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" /> 
        <div class="tooltip"> 
         <div class="name">Johannes Scherg</div> 
         <div class="function">Mediendesigner</div> 
        </div> 
        <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" /> 
       </li> 

       <li class="teamitem"> 
        <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" /> 
        <div class="tooltip"> 
         <div class="name">Johannes Scherg</div> 
         <div class="function">Mediendesigner</div> 
        </div> 
        <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" /> 
       </li> 

       <li class="teamitem"> 
        <img src="fileadmin/media/team/0.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" /> 
        <div class="tooltip"> 
         <div class="name">Johannes Scherg</div> 
         <div class="function">Mediendesigner</div> 
        </div> 
        <img src="fileadmin/media/team/0-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" /> 
       </li> 

       <li class="teamitem"> 
        <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" /> 
        <div class="tooltip"> 
         <div class="name">Johannes Scherg</div> 
         <div class="function">Mediendesigner</div> 
        </div> 
        <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" /> 
       </li> 

       <li class="teamitem"> 
        <img src="fileadmin/media/team/0.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" /> 
        <div class="tooltip"> 
         <div class="name">Johannes Scherg</div> 
         <div class="function">Mediendesigner</div> 
        </div> 
        <img src="fileadmin/media/team/0-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" /> 
       </li> 

       <li class="teamitem"> 
        <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" /> 
        <div class="tooltip"> 
         <div class="name">Johannes Scherg</div> 
         <div class="function">Mediendesigner</div> 
        </div> 
        <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" /> 
       </li> 

       <li class="teamitem"> 
        <img src="fileadmin/media/team/0.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" /> 
        <div class="tooltip"> 
         <div class="name">Johannes Scherg</div> 
         <div class="function">Mediendesigner</div> 
        </div> 
        <img src="fileadmin/media/team/0-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" /> 
       </li> 

       <li class="teamitem"> 
        <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" /> 
        <div class="tooltip"> 
         <div class="name">Johannes Scherg</div> 
         <div class="function">Mediendesigner</div> 
        </div> 
        <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" /> 
       </li> 

       <li class="teamitem"> 
        <img src="fileadmin/media/team/0.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" /> 
        <div class="tooltip"> 
         <div class="name">Johannes Scherg</div> 
         <div class="function">Mediendesigner</div> 
        </div> 
        <img src="fileadmin/media/team/0-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" /> 
       </li> 

       <li class="teamitem"> 
        <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" /> 
        <div class="tooltip"> 
         <div class="name">Johannes Scherg</div> 
         <div class="function">Mediendesigner</div> 
        </div> 
        <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" /> 
       </li> 

       <li class="teamitem"> 
        <img src="fileadmin/media/team/0.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" /> 
        <div class="tooltip"> 
         <div class="name">Johannes Scherg</div> 
         <div class="function">Mediendesigner</div> 
        </div> 
        <img src="fileadmin/media/team/0-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" /> 
       </li> 

       <li class="teamitem"> 
        <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" /> 
        <div class="tooltip"> 
         <div class="name">Johannes Scherg</div> 
         <div class="function">Mediendesigner</div> 
        </div> 
        <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" /> 
       </li> 

      </ul> 
     </div> 
    </div> 
    <div id="sliderwrap"> 
     <div id="slider"></div> 
    </div> 
</div> 

Answer 1

Я уверен, если это то, что вы хотите, но если вы хотите, чтобы отобразить каждую подсказку в том же положении, в каждом элементе списка, вы можете попробовать применить положение: относительно всех узлов списка:

.team li { 
    display: block; 
    float: left; 
    height: 300px; 
    margin-right: 10px; 
    padding: 0; 
    width: 155px; 
    position:relative; //added code 
}