I'm currently working on overarchitecting a tooltip. My aim is for the tooltip abstraction to have no knowledge of the wider context (document). It should simply be placed within an element and function seamlessly.
Unfortunately, I'm struggling to achieve the desired max-width behavior:
https://i.sstatic.net/fUmBP.png
This difficulty arises because the content has white-space: nowrap.
However, removing it presents me with this issue:
https://i.sstatic.net/GK7PO.png
I need assistance in adjusting the layout so that the proper max-width behavior can be achieved. Specifically, when the line runs out of room, the content should wrap onto a new line.
You can view the example here: https://jsbin.com/fucujak/3/edit?html,css,output
helper {
display: inline-block;
position: relative;
top: 30%;
left:30%;
padding: 10px;
background: green;
color: white;
border-radius: 300px
}
tooltip {
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
tooltip:hover tooltip-anchor {
display: block;
}
tooltip-anchor {
display: none;
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
}
tooltip-container {
display: block;
position: absolute;
}
tooltip-positioner {
display: block;
position: relative;
left: -50%;
}
tooltip-content {
display: block;
padding: 10px;
/* white-space: nowrap; */
background: blue;
color: white;
max-width: 100px;
} <helper>
i
<tooltip>
<tooltip-anchor>
<tooltip-container>
<tooltip-positioner>
<tooltip-content>
Some long, extended tooltip content
</tooltip-content>
</tooltip-positioner>
</tooltip-container>
</tooltip-anchor>
</tooltip>
</helper>