I'm currently working on implementing tooltips with dynamic content on my website. However, I am facing an issue where the content outside the tooltip is displayed over one of my tooltips.
Here's the code snippet:
/*
Looking for a simple yet stylish tooltip?
Simply copy all [data-tooltip] blocks below:
*/
[data-tooltip] {
position: relative;
z-index: 10;
}
... (more code included)
<main>
<div class="info-wrapper">
<p>
<span class="title-question">
Seeking an animated and user-friendly tooltip solution?
</span>
<span>
Just replicate the CSS declarations under
<code>[data-tooltip].</code>
</span>
</p>
<p data-tooltip="This is an example of a super long tooltip text that goes over multiple lines. 
 
 Note: The tooltip size is dynamically adjusted to the content. However, a minimum and a maximum width are defined." data-tooltip-location="bottom">
To use the tooltip, simply add the attribute »data-tooltip« with the desired text to an element. P.S. Hover over me to see a long tooltip.
</p>
<p data-tooltip="This is an example of a super long tooltip text that goes over multiple lines. 
 
 Note: The tooltip size is dynamically adjusted to the content. However, a minimum and a maximum width are defined." data-tooltip-location="top">
To use the tooltip, simply add the attribute »data-tooltip« with the desired text to an element. P.S. Hover over me to see a long tooltip.
</p>
</div>
</main>