Mam na celu zrobić listę w której są zapisane numery, każdy numer ma aktywowany tooltip z informacjami dla użytkownika. Cała lista jest "scrollable", ale bez widocznego paska scrollowania. Problem polega na tym, że podczas scrollowania tooltip zmienia pozycję pionową. Dokładniej mówiąc zmienia się offsetTop tooltipa wraz ze srcollowaniem.
Przykład poniżej:
HTML:
<div id="content-past-queue">
<div style="position:relative;">
<div class="pq-wrapper">
<div id="past-queue">
<div id="past-queue-wrapper">
<div class="rl-tooltip">
<div class="rl-past-queue-tooltip"></div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#content-past-queue {
position: absolute;
right: 40px;
left: 50%;
bottom: 70px;
z-index: 5;
height: 300px;
}
.pq-wrapper {
width: 132px;
overflow: hidden;
}
#past-queue {
height: 300px;
width: 150px;
overflow-y: auto;
overflow-x: hidden;
}
#past-queue-wrapper {
width: 150px;
padding-left: 30px;
padding-bottom: 10px;
padding-top: 30px;
}
CSS dla tooltip
.rl-tooltip{
position: static;
height: 9px;
width: 70px;
padding-top: 3px;
}
.rl-past-queue-tooltip{
background: #1c1c22;
color: #aaa;
padding: 10px;
border-radius: 5px;
position: absolute;
width: 150px;
display: none;
font-size: 10px;
word-wrap: break-word;
}
.rl-past-queue-tooltip:hover{
display: block;
}