Błędna pozycja tooltipa po scroll'owaniu

Question

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

 

 

Answer 1

daj cały kod a nie takie wycinki

chcesz by nie było paska scrollowania?

Comments

Kod który podałem to całość. I tak nie chcę paska scrollowania, ale zawartość musi być scrollable. Oczywiście to działa, ale podczas scrollowania tooltip zmienia pozycję Y.  Mniej więcej wygląda to tak jak na wyżej podanym załączniku.