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

[Lun2]

Добрый вечер!
На 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.

[Lun2]

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

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

[Lun2]

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

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

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

[рони]

Lun2,

.tooltipStyle{
   position:  relative;
}

[voraa]

white-space: nowrap;

[voraa]

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

[рони]

Почему?

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

[Lun2]

white-space: nowrap;

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

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

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

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

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

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

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

[laimas]

bottom: 0px;

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