Как выровнять всплывающую подсказку относительно страницы или ее контейнера? [закрыто] ⇐ Html

[Anonymous]

Я размещаю всплывающую подсказку вокруг ссылок. Ссылки слева на странице допустимы, но при наведении курсора на ссылки справа всплывающая подсказка выходит за пределы страницы.
Ссылки находятся в элементе таблицы. Как мне адаптировать это так, чтобы всплывающая подсказка отображалась по центру страницы или по центру таблицы , а не по ссылке?

Код: Выделить всё

.tooltip {
position: relative;
display: inline-block;
color:#56e;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 400px;
overflow: auto;
background-color: white;
color: #000;
text-align: left;
border-radius: 6px;
-moz-box-shadow: 10px 10px 5px #bbb;
-webkit-box-shadow: 10px 10px 5px #bbb;
box-shadow: 10px 10px 5px #bbb;
padding: 15px;
display:block;

/* Position the tooltip */
position: absolute;
z-index: 80;
top: 20px;
left: 20px;
}

.tooltip:hover > .tooltiptext {
visibility: visible;
}

.tooltip .tthead {
font-weight: bold;
}

Код: Выделить всё

How to center the tooltip text?
The pop-up follows the hoverable text!

Hover here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada ex in dignissim pretium. Fusce.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -container