I'm having trouble displaying a tooltip when I hover over a square inside a parent container with the overflow-x-scroll class. The issue arises because the tooltip gets cut off due to the parent container's properties. Adjusting z-index and overflow-y didn't resolve the problem.
Unfortunately, changing the height of the parent container is not an option for me at this time.
View the Tailwind CSS playground: https://play.tailwindcss.com/Mb5XO1DTZs
HTML:
<div class="mx-auto max-w-6xl p-8">
<div id="grid" class="grid grid-rows-7 gap-2 grid-flow-col p-4 bg-red-300 rounded-md shadow-md overflow-x-scroll">
<div id="gridItem" class="relative cursor-pointer items-center bg-gray-500 shadow-md rounded-[2px] h-3 w-3 text-xs hover:z-50" data-tooltip="LOOK HERE">
</div>
<div id="gridItem" class="relative cursor-pointer items-center bg-gray-500 shadow-md rounded-[2px] h-3 w-3 text-xs hover:z-50" data-tooltip="LOOK HERE">
</div>
<div id="gridItem" class="relative cursor-pointer items-center bg-gray-500 shadow-md rounded-[2px] h-3 w-3 text-xs hover:z-50" data-tooltip="LOOK HERE">
</div>
</div>
</div>
CSS file:
@tailwind base;
@tailwind components;
@tailwind utilities;
#gridItem::before,
#gridItem::after {
--scale: 0;
--arrow-size: 5px;
--tooltip-color: green;
position: absolute;
top: -.25rem;
left: 50%;
transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
transition: 150ms transform;
transform-origin: bottom center;
}
#gridItem::before {
--translate-y: calc(-100% - var(--arrow-size));
content: attr(data-tooltip);
color: white;
padding: .5rem;
border-radius: .3rem;
text-align: center;
width: max-content;
background: var(--tooltip-color);
}
#gridItem:hover::before,
#gridItem:hover::after {
--scale: 1;
z-index: 50;
visibility: visible;
overflow: visible;
}
#gridItem::after {
--translate-y: calc(-1 * var(--arrow-size));
content: '';
border: var(--arrow-size) solid transparent;
border-top-color: var(--tooltip-color);
transform-origin: top center;
}