[css] okienko popup. Złe pozycjonowanie Opcje

[Soolar]

Witam.
Jest to skrypt, który dopisuje na koniec do danego (elementu) (odl. xxx)
I gdy na (element) - (odl. xxx) najedzie się myszką, wyskakuje okno popup

Jak zmusić okienko popup, by wyświetlało się poza obramowanie/ramkę, spoiler, nie tylko wewnątrz?

Dokładniej chodzi o wyświetlenie się całego okienka na, forum w poście, poza ramką postu, oraz poza ramką spoilera. Chce by okienko wyświetlało się ponad wszystkie elementy, na wierzchu tej ramki.
Jeżeli spoiler jest wystarczająco duży, to okienko popup jest całe wyświetlone, inaczej okienko popup częściowo lub całkowicie chowie się pod ramką spoilera, a obok wyskakuje scrolbar.

CODE

var popup;

var span = $("<span> (odl. "+dist_r+")</span>" )
.css("position", "relative")
.hover(function() {
popup = $("<div></div>").css({
position: "absolute",
top: "1.5em",
background: "white",
display: "inline-table",
"z-index": 100

});

Gdy zmienię w linijce: .css("position", "relative")
pozycję "relative" na "absolute", wtedy uzyskuje pożądany efekt, czyli okno popup wyświetla się w całości, wychodząc poza obramowania, obszaru postu/spoilera.

Ale wtedy pojawia się inny problem, z pozycjonowaniem
Prawidłowo tak to powinno wyglądać
oryginalny tekst:
(element) [[[tu jakiś tekst zaraz za (elementem)]]

Po użyciu skryptu tak powinien wyglądać tekst
(element) (odl. xxx) [[[tu jakiś tekst który był napisany za (elementem)]]

Lecz niestety, tekst - [[[tu jakiś tekst który był napisany za (elementem)]] który powinien być przesunięty za - (odl. xxx) wyświetlany jest normalnie zaraz po elemencie, czyli - (odl. xxx) nachodzi na ten tekst, czyli marnie to wygląda.

Jestem początkującym, więc proszę o pomoc w rozwiązaniu mojego problemu

Ten post edytował Soolar 2.02.2020, 12:45:04