Hello,
I'm using a jQuery Tooltip and a jQuery Slider (jQueryUI) at the same time. The slider works fine. But after scrolling tooltips are displayed at a wrong position (download screenshot or source). I guess it's because of wrong CSS …
Why are some tooltips not displayed at the correct position?
Thanks Johannes
<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>