I am currently utilizing both a jQuery Tooltip and a jQuery Slider (jQueryUI) simultaneously. While the slider is functioning correctly, I am encountering an issue where tooltips are being displayed in the wrong position after scrolling (view screenshot or download the source). This discrepancy may be attributed to incorrect CSS settings...
What could be causing some tooltips to display at the incorrect position?
<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;}
<!-- More CSS styling -->
</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">
<!-- Additional JavaScript code involved of changing images, tooltips, and sliders-->
<div id="sliderContent">
<div class="viewer">
<div class="content-conveyor">
<ul class="team">
<!-- Team member listing with tooltip configurations -->
</ul>
</div>
</div>
<div id="sliderwrap">
<div id="slider"></div>
</div>
</div>