Ширина контейнера должна быть длиной текста. Чтобы текст не переносился, пока не будет достигнута максимальная ширина.
white-space: nowrap; - не подходит.
На данный момент . Готовый образец .
[data-title] {position: relative;}
[data-title]:hover::after {visibility: visible; opacity: 1; transition: all 0.1s ease 0.5s;}
[data-title]::after {
content: attr(data-title);
position: absolute;
left: 100%;
z-index: 1000001;
visibility: hidden;
opacity: 0;
font: normal 13px/1.3 "Segoe UI", helvetica, arial, sans-serif;
color: #000;
padding: 2px 5px 3px 5px;
letter-spacing: -0.01em;
word-spacing: -0.07em;
border:1px solid #777;
border-radius:2px;
box-shadow:5px 5px 3px -2px rgba(0,0,0,0.35);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(222,222,222,1) 100%);
max-width: 600px;
white-space: normal;
word-wrap: break-word;
}
<a href="" data-title="Short text">Tooltip 1</a><br /><br />
<a href="" data-title="Tooltip text about 50 characters long">Tooltip 2</a><br /><br />
<a href="" data-title="The text for this tooltip can exceed 100 characters. The width of the container is limited by the max-width parameter, and the tooltip text should be automatically wrapped.">Tooltip 3</a>