На сайте есть некоторый текст, при наведении на отдельные слова в котором должна появляться всплывающая подсказка. Реализовал это так: Код (CSS): wr {position: relative;border-bottom: 1px dashed #000080;} wr span {visibility: hidden;position: absolute;width:300px;bottom: 100%; z-index: 999;margin-left: 250px;display: block; padding: 1em;background: #fff;border: dotted 1px black;display: flex;font-size: 7pt;text-align: left;line-height: 2em;} wr > span > img {width:60px;height:81px;margin: 0 20px 0 0;} wr:hover span {visibility: visible;} вот пример вхождения HTML: Здесь много текста <wr>Наоми Новик<span><img src="здесьпутькфото"><div><b>Наоми Янина Новик</b><br>(род. 30.04.1973)<br> американская писательница-фантаст, лауреат премий Джона Кэмпбелла и Locus.</div></span></wr> здесь ещё текст. Проблема в том, что у меня не получается позиционировать всплывающую подсказку над ссылкой/курсором. Я понимаю, почему это так, margin привязан к родительскому элементу, который во всю страницу, следовательно привязать позиционирование можно только к краю текста. Но как-то же такие вещи делают?
Вот сделал нечто похожее HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .alert-wrap{ display: inline-block; } .alert-link{ color: blue !important; cursor: pointer; } .alert{ width: 100%; height: 0; position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .alert-box{ display: none; position: absolute; width: 250px; max-width: 100vw; background: #000; padding: 10px; color: #fff; z-index: 2; } .alert-link:hover+.alert>.alert-box{ display: block; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="alert-wrap"> <span class="alert-link">Repellat</span> <span class="alert"> <span class="alert-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> </span> </span> in atque voluptatum, minima quam voluptate rerum ipsa vel tempore perspiciatis non, iure odio dicta voluptatibus. Possimus iste modi repellendus mollitia.</p> <p>Debitis cum voluptates sed commodi maxime quidem magnam, non assumenda inventore in nemo, dolore, voluptas quam. Itaque quos dolorem architecto deserunt adipisci delectus mollitia! Ut laboriosam perferendis delectus nemo aliquid.</p> </body> </html>