Как сделать, чтобы текст не усекался в пределах родительского элемента?
 

Добрый вечер!
На html-странице программно создан и размещен div-контейнер со свойством overflow=auto, чтобы при необходимости от скроллировался.
В контейнере также программно создана таблица.
Здесь все работает нормально.

Необходимо, чтобы при наведении мыши на определенную графу таблицы появлялся tooltip.
Он создается в цикле формирования строк таблицы к каждой строке таким образом:

for (let i = 0; i < hovers.length; i++) {
            // добавляем данные в таблицу
             var row = tab.insertRow(i);
             
             // выводим tagname
             var cell = row.insertCell(1);

            // здесь создается подсказка - tooltip  к ячейке cell
             cell.textContent = "tag=" + hovers[i].tagName;
             cell.classList.add("tooltipStyle");
             var info = "tooltip " + i;
             cell.setAttribute("data-info", info);                  
        }

Появление tooltip'a обеспечивается CSS:

.tooltipStyle:hover:after {
    overflow: visible;
    position: absolute;
    content: attr(data-info);
    font-size: 16px;
    background: rgba(5,13,156,.55);
    color: #fff;
    left: 80px;
}

Проблема в том, что текст tooltip'a усекается (переносится) на границе div-контейнера.
Мне же необходимо, чтобы (1) tooltip не усекался вообще и, одновременно (2) таблица бы не вылезала за div.
(2) - работает, (1) - не получается.

Подскажите, пожалуйста, каким образом можно сделать, чтобы tooltip не усекался.

Lun2,
может минимальный макет тут, но целиком?

например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Рони, макета нет, т.к. все элементы, о которых я пишу генерируются динамически на JS и добавляются на страницу.
Сам код JS - это Web extension для FF, он подгружается на любую доступную страницу.

рони,
я перенес в codepen участок программы и CSS, чтобы можно было посмотреть, если есть возможность, как это выглядит вживую.
https://codepen.io/FTOR2/pen/rNeBJaY?editors=1111

При наведении мыши на строку таблицы выскакивает подсказка и переносится на другую строку, хотя на экране места справа достаточно.

Также не совсем понятно, почему контейнер myDiv (с зеленой рамкой) меняет ширину. Мне бы хотелось, чтобы его ширина не менялась.

Lun2,

.tooltipStyle{
   position:  relative;
}

white-space: nowrap;

рони,
Если так, то тултип будет не виден полностью, а только в пределах дива.
Но с absolute тоже проблема. Тултип появляется на том месте, который занимал элемент до скролла (!?)
Почему?

нужен специалист по css.

voraa, спасибо - это спасает от переносов.

Кстати, по этой работе у меня еще один вопрос.

В CSS объявлен стиль .resizeBlock - маленький желтый квадратик.
В программе - это переменная myDiv2, добавляется в качестве дочернего к myDiv.

Я хотел, чтобы он появлялся в правом нижнем углу и задал такие свойства:

.resizeBlock {
	position: absolute;
	[B]bottom: 0px;
	right: 0px;[/B]
	width: 10px;
	height: 10px;
	cursor: nwse-resize;
	background-color: yellow;
}

К правому краю он хорошо прижимается, а вот к нижнему - не хочет.

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

А 0px и 0% или иное ноль имеют разницу? Зачем единицы то указывать.