Tooltip
Provide brief, informative text when users hover over an element, offering additional context without cluttering the interface.
<!-- Top tooltip -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-purple-400 to-purple-600/90 hover:from-purple-400 hover:to-purple-600 focus:from-purple-400 focus:to-purple-600 focus:ring-0 rounded">
<span aria-label="Top Tooltip" data-microtip-position="top" role="tooltip">Top Tooltip</span>
</button>
<!-- Bottom tooltip -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-purple-400 to-purple-600/90 hover:from-purple-400 hover:to-purple-600 focus:from-purple-400 focus:to-purple-600 focus:ring-0 rounded">
<span aria-label="Bottom Tooltip" data-microtip-position="bottom" role="tooltip">Bottom Tooltip</span>
</button>
<!-- Left tooltip -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-purple-400 to-purple-600/90 hover:from-purple-400 hover:to-purple-600 focus:from-purple-400 focus:to-purple-600 focus:ring-0 rounded">
<span aria-label="Left Tooltip" data-microtip-position="left" role="tooltip">Left Tooltip</span>
</button>
<!-- Right tooltip -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-purple-400 to-purple-600/90 hover:from-purple-400 hover:to-purple-600 focus:from-purple-400 focus:to-purple-600 focus:ring-0 rounded">
<span aria-label="Right Tooltip" data-microtip-position="right" role="tooltip">Right Tooltip</span>
</button>
