Tooltips
Provide brief, informative text when users hover over an element, offering additional context without cluttering the interface.
<!-- Top tooltip -->
<button class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">
<span aria-label="Top Tooltip" data-microtip-position="top" role="tooltip">Top Tooltip</span>
</button>
<!-- Bottom tooltip -->
<button class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">
<span aria-label="Bottom Tooltip" data-microtip-position="bottom" role="tooltip">Bottom Tooltip</span>
</button>
<!-- Left tooltip -->
<button class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">
<span aria-label="Left Tooltip" data-microtip-position="left" role="tooltip">Left Tooltip</span>
</button>
<!-- Right tooltip -->
<button class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">
<span aria-label="Right Tooltip" data-microtip-position="right" role="tooltip">Right Tooltip</span>
</button>