Tooltips

A tooltip is a floating, non-actionable label used to explain a user interface element or feature. Pure html and css tooltip by Microtip.

Tooltips

              
<!-- Top tooltip -->
<button class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">
  <span aria-label="Top Tooltip" data-microtip-position="top" role="tooltip">Top Tooltip</span>
</button>

<!-- Bottom tooltip -->
<button class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">
  <span aria-label="Bottom Tooltip" data-microtip-position="bottom" role="tooltip">Bottom Tooltip</span>
</button>

<!-- Left tooltip -->
<button class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">
  <span aria-label="Left Tooltip" data-microtip-position="left" role="tooltip">Left Tooltip</span>
</button>

<!-- Right tooltip -->
<button class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">
  <span aria-label="Right Tooltip" data-microtip-position="right" role="tooltip">Right Tooltip</span>
</button>