I have a mapboxgl-popup-content div in which I have placed a flowbite button which has a tooltip div. When I put the mouse over the button the flowbite tooltip does not appear, but it is also valid for the flowbite modal, the flowbite popover, if they are placed inside the mapboxgl-popup-content.
Flowbite code:
<h2 class="item-center mb-2 text-sm font-semibold text-gray-500 dark:text-white">Information: </h2>
<button data-tooltip-target="tooltip-light" data-tooltip-style="light" type="button">
<svg class="w-4 h-4 me-2 text-green-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M2 12a10 10 0 1 1 20 0 10 10 0 0 1-20 0Zm9.4-5.5a1 1 0 1 0 0 2 1 1 0 1 0 0-2ZM10 10a1 1 0 1 0 0 2h1v3h-1a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-1v-4c0-.6-.4-1-1-1h-2Z" clip-rule="evenodd"/>
</svg>
</button>
<div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 tooltip">${event.features[0].properties.time}
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
If I turn off the opacity and visible tags of the flowbite tooltip, it becomes visible:
