[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 не усекался.