I have a code where you can hover over the italicized text to reveal a tooltip. the tooltip content works well when inline tooltip has just one line.
(https://i.sstatic.net/iO2IO5j8.png)
But the problem occurs when inline tooltip has more than one line.
(https://i.sstatic.net/QXi9FAnZ.png)
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.tooltip-container {
display: inline;
position: relative;
cursor: pointer;
}
.tooltip-text {
visibility: hidden;
width: 200px;
background-color: #555;
color: #fff;
text-align: left;
padding: 5px;
border-radius: 4px;
position: absolute;
z-index: 1;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
display: block;
white-space: normal;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip-text::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #555;
}
.tooltip-container:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<p>Here is some text with an <span class="tooltip-container"><i>"inline tooltip" wraps into the second line the tooltip content doesn't seem to be positioned properly (like this)</i>
<span class="tooltip-text">This is the tooltip content. It will appear below the inline text.</span></span>?</p>
</body>
</html>
Is it possible to make the tooltip content appears below the second line/lasted line of the inline text? Thank you.
New contributor
X DD is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.