I am currently working on customizing tooltips and would like them to display right below the hover text in a responsive manner, with the ability to have multiline text. Instead of spreading horizontally, I want the tooltip to expand vertically based on the length of the content.
My goal is to adjust the width of the text so that the container's vertical size increases as the text gets longer rather than flowing horizontally.
Here is what I have attempted so far:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
color: black;
}
.tooltip:hover {
text-decoration: none;
}
[data-title]::after {
content: attr(data-title);
background: rgba(0, 0, 0, 0.2);
color: #111;
-website-transform: translateY(50%) translateX(-55%);
transform: translateY(50%) translateX(-55%);
word-wrap: break-word;
height: 350px;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -2.6em;
left: 0%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 20;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}<p>Words words <a class="tooltip" data-title="Title text.">link text</a> words.
More words <a class="tooltip" data-title="More link text.">more link text</a>.</p>