The tooltips for each menu item are becoming hidden due to the overflow-auto property set on the menu container, which has a max-height.
<code><div class="max-w-sm border rounded-lg m-6">
<div class="space-y-2 max-h-[200px] 2xl:max-h-[400px] overflow-y-auto p-6">
<a class="relative w-full flex items-center pl-[28px] pr-[14px] py-2 cursor-pointer rounded-[3px] border-l-[4px] transition-all duration-500 hover:bg-purple-300 group">
<span>Menu 1</span>
<div class="absolute py-2 px-4 w-max min-w-12 max-w-[260px] rounded-md bg-indigo-800 pointer-events-none z-30 opacity-0 group-hover:opacity-100 transition-all duration-300 bottom-full inset-x-0 mx-auto mb-2">
<div class="flex flex-col space-y-2">
<span class="text-white text-sm leading-[18px] break-all whitespace-normal">Tooltip 1</span>
</div>
<svg class="absolute text-indigo-800 h-1 w-full left-0 top-full" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" fill="none">
<path d="M4 4L8 2.28531e-06L1.14444e-06 1.43051e-06L4 4Z" fill="#19005F"/>
</svg>
</div>
</a>
<a class="relative w-full flex items-center pl-[28px] pr-[14px] py-2 cursor-pointer rounded-[3px] border-l-[4px] transition-all duration-500 hover:bg-purple-300 group">
<span>Menu 2</span>
<div class="absolute py-2 px-4 w-max min-w-12 max-w-[260px] rounded-md bg-indigo-800 pointer-events-none z-30 opacity-0 group-hover:opacity-100 transition-all duration-300 bottom-full inset-x-0 mx-auto mb-2">
<div class="flex flex-col space-y-2">
<span class="text-white text-sm leading-[18px] break-all whitespace-normal">Tooltip 2</span>
</div>
<svg class="absolute text-indigo-800 h-1 w-full left-0 top-full" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" fill="none">
<path d="M4 4L8 2.28531e-06L1.14444e-06 1.43051e-06L4 4Z" fill="#19005F"/>
</svg>
</div>
</a>
</div>
</div>
</code>
<code><div class="max-w-sm border rounded-lg m-6">
<div class="space-y-2 max-h-[200px] 2xl:max-h-[400px] overflow-y-auto p-6">
<a class="relative w-full flex items-center pl-[28px] pr-[14px] py-2 cursor-pointer rounded-[3px] border-l-[4px] transition-all duration-500 hover:bg-purple-300 group">
<span>Menu 1</span>
<div class="absolute py-2 px-4 w-max min-w-12 max-w-[260px] rounded-md bg-indigo-800 pointer-events-none z-30 opacity-0 group-hover:opacity-100 transition-all duration-300 bottom-full inset-x-0 mx-auto mb-2">
<div class="flex flex-col space-y-2">
<span class="text-white text-sm leading-[18px] break-all whitespace-normal">Tooltip 1</span>
</div>
<svg class="absolute text-indigo-800 h-1 w-full left-0 top-full" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" fill="none">
<path d="M4 4L8 2.28531e-06L1.14444e-06 1.43051e-06L4 4Z" fill="#19005F"/>
</svg>
</div>
</a>
<a class="relative w-full flex items-center pl-[28px] pr-[14px] py-2 cursor-pointer rounded-[3px] border-l-[4px] transition-all duration-500 hover:bg-purple-300 group">
<span>Menu 2</span>
<div class="absolute py-2 px-4 w-max min-w-12 max-w-[260px] rounded-md bg-indigo-800 pointer-events-none z-30 opacity-0 group-hover:opacity-100 transition-all duration-300 bottom-full inset-x-0 mx-auto mb-2">
<div class="flex flex-col space-y-2">
<span class="text-white text-sm leading-[18px] break-all whitespace-normal">Tooltip 2</span>
</div>
<svg class="absolute text-indigo-800 h-1 w-full left-0 top-full" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" fill="none">
<path d="M4 4L8 2.28531e-06L1.14444e-06 1.43051e-06L4 4Z" fill="#19005F"/>
</svg>
</div>
</a>
</div>
</div>
</code>
<div class="max-w-sm border rounded-lg m-6">
<div class="space-y-2 max-h-[200px] 2xl:max-h-[400px] overflow-y-auto p-6">
<a class="relative w-full flex items-center pl-[28px] pr-[14px] py-2 cursor-pointer rounded-[3px] border-l-[4px] transition-all duration-500 hover:bg-purple-300 group">
<span>Menu 1</span>
<div class="absolute py-2 px-4 w-max min-w-12 max-w-[260px] rounded-md bg-indigo-800 pointer-events-none z-30 opacity-0 group-hover:opacity-100 transition-all duration-300 bottom-full inset-x-0 mx-auto mb-2">
<div class="flex flex-col space-y-2">
<span class="text-white text-sm leading-[18px] break-all whitespace-normal">Tooltip 1</span>
</div>
<svg class="absolute text-indigo-800 h-1 w-full left-0 top-full" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" fill="none">
<path d="M4 4L8 2.28531e-06L1.14444e-06 1.43051e-06L4 4Z" fill="#19005F"/>
</svg>
</div>
</a>
<a class="relative w-full flex items-center pl-[28px] pr-[14px] py-2 cursor-pointer rounded-[3px] border-l-[4px] transition-all duration-500 hover:bg-purple-300 group">
<span>Menu 2</span>
<div class="absolute py-2 px-4 w-max min-w-12 max-w-[260px] rounded-md bg-indigo-800 pointer-events-none z-30 opacity-0 group-hover:opacity-100 transition-all duration-300 bottom-full inset-x-0 mx-auto mb-2">
<div class="flex flex-col space-y-2">
<span class="text-white text-sm leading-[18px] break-all whitespace-normal">Tooltip 2</span>
</div>
<svg class="absolute text-indigo-800 h-1 w-full left-0 top-full" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" fill="none">
<path d="M4 4L8 2.28531e-06L1.14444e-06 1.43051e-06L4 4Z" fill="#19005F"/>
</svg>
</div>
</a>
</div>
</div>
Source code: https://play.tailwindcss.com/eXDr2VAvWC