I'm working on a tooltip feature and facing an issue where the content does not expand as intended based on the CSS rules. Here's the snippet of my CSS code:
.parent {
display: inline-flex;
position: relative;
font-weight: 900;
}
.parent:hover .child {
display: block;
}
.child {
display: none;
position: absolute;
bottom: 10px;
font-weight: normal;
background-color: black;
color: white;
height: 20px;
max-width: 400px;
width: auto;
overflow: auto;
padding: 10px;
}
Despite setting max-width to 400px, the tooltip's content is not expanding beyond the width of its parent element (bwre-tooltip).
I've tried adjusting the 'width' property and explored other options like 'max-content', but haven't found a satisfactory solution yet. I've also double-checked for any conflicting CSS rules that could be affecting the tooltip's width.
Is there a specific CSS technique or property I should be using to ensure the tooltip's content grows until its max-width is reached, regardless of the parent element's width?
If you have any insights, suggestions, or alternative methods to achieve this behavior, I would greatly appreciate your input. Thank you in advance for your help!
Additional Information:
Here's how the HTML structure looks:
<section>
ipsum ...
<div class="parent">
<span class="child">
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam
</span>
hello world
</div>
...
</section>You can also access the sandbox link here.