Tooltip within text without line break (css only) - html

Question

I wanted to have multiple tooltips within a text on my website. I have tried to use both span and div tags to make a tooltip with CSS only and it worked for the most purt, however I have trouble positioning the tooltiptext correctly. It is supposed to show up above the hoverable word, but currently it just shows up in the line below on the left. My code:
.tooltip {
position: relative;
display: inline;
text-decoration: underline dotted black;
}
.tooltip:hover .tooltiptext {
display: block;
position: absolute;
z-index: 3;
padding: 0.3vw;
}
.tooltiptext {
display: none;
color: white;
background-color: black;
border-radius: 0.3vw;
}
<p>Lorem ipsum dolor sit amet,
<span class="tooltip"> consectetuer<span class="tooltiptext"> Some Text</span></span>
adipiscing elit. Aenean commodo ligula eget dolor.</p>
Are there any solutions to this problem?

Answer 1

I suppose you wanted something like this.
p {
padding:10px;
}
.tooltip {
position: relative;
display: inline;
text-decoration: underline dotted black;
}
.tooltip:hover .tooltiptext {
display: block;
position: absolute;
z-index: 3;
padding: 0.3vw;
left:50%;
top:-19px;
transform:translateX(-50%);
width:100%;
text-align:center;
}
.tooltiptext {
display: none;
color: white;
background-color: black;
border-radius: 0.3vw;
}
<p>Lorem ipsum dolor sit amet,
<span class="tooltip"> consectetuer<span class="tooltiptext"> Some Text</span></span>
adipiscing elit. Aenean commodo ligula eget dolor.</p>