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

[Anonymous]

С помощью CSS легко расположить всплывающую подсказку вокруг текста, наводимого при наведении. Однако у меня есть ряд из нескольких фрагментов текста, которые можно «навести» на страницу. Те, что слева от страницы, в порядке, но при наведении курсора на ссылки справа страницы всплывающее окно вылетает за край страницы.
Текстовая строка находится внутри элемента таблицы.
Этот CSS помещает всплывающую подсказку под каждым «наводимым» текстом:

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

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

Как мне адаптировать это, чтобы всплывающее окно отображалось по центру страницы или даже по центру ячейки таблицы , например? Вместо того, чтобы выравнивать текст по «зависаемому» тексту?

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