Как сделать появляющийся при наведении блок поверх jscrollpane?

Question

[The-W]

Пример - https://codepen.io/thewebm/pen/qBMwjzX

Нужно, чтобы появляющийся при наведении блок имел position: absolute; но не получается сделать поверх, Z-INDEX не работает с ним, получается только с position: fixed;

Answer 1

[Виталий Першин]

Воспользуйтесь tippyjs и вызывайте её с параметром:
appendTo: () => document.body,
Контент будет помещен поверх всего сайта, а стилизовать можно как угодно

Comments

[The-W]

спасибо, а можно пример с вызовом этого параметра? Не очень понимаю, как это сделать

[Виталий Першин]

The-W,

tippy("[data-tip]", {
		appendTo: () => document.body,
		animation: "fade",
		delay: 0,
		allowHTML: true,
		interactive: true,
		interactiveBorder: 2,
		arrow: true,
		arrowType: "round",
		placement: "top",
	
	});

[The-W]

Виталий Першин, подскажите, например делаю так: https://codepen.io/thewebm/pen/OJoeVPK

<span data-tip="" style="width: 200px;">
название
</span>

tippy("[data-tip]", {
    appendTo: () => document.body,
    animation: "fade",
    delay: 0,
    allowHTML: true,
    content: '<strong style="font-size: 14px;">Возвращение АйКарли</strong><br><p style="font-size:10pt;">Темы: Социальные сети<br></p><strong><u>Жанр:</u>  </strong>драма, мелодрама, комедия<br><strong><u>Страна:</u>  </strong>США<br><strong><u>Режиссер:</u>  </strong>Фил Льюис, Энтони Рич<br><strong><u>Продолжительность:</u>  </strong>26 мин ', 
    interactive: true,
    interactiveBorder: 2,
    arrow: true,
    arrowType: "round",
    placement: "top",
  
  });

Можно ли указать html текст не в js, а в html-коде?
Как стилизовать всплывающее окно?

[Виталий Першин]

The-W, Например обратиться к документации https://atomiks.github.io/tippyjs/v5/html-content/
и примеры поискать:
https://codepen.io/amkid/pen/KeOqKX