I am utilizing a css tooltip that is linked to a span element in the following manner:
<span class="mytooltip" data-mytooltip="Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.">
Has Tooltip
</span>
The CSS code snippet for this is as follows:
.mytooltip {
display: inline-block;
position: relative;
}
.mytooltip:hover:after {
content: attr(data-mytooltip);
display: block;
margin-top: 0.7rem;
margin-left: -1rem;
left: auto;
bottom: auto;
padding: .3rem 1rem;
position: absolute;
z-index: 98;
width: 400px;
}
Within the .mytooltip:hover:after{}
width: 400px
and
max-width: 400px; white-space: nowrap;
function as intended. However, the latter part seems redundant because although the pseudo element has the correct width set, the text extends beyond it when it exceeds 400px in length.
Is there an alternative method to apply max-width to the pseudo element while ensuring the text wraps inside?
Your input and guidance on this matter would be greatly appreciated.