Skip to main content
Logo USWDS + Tailwind

Tooltip

A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.

This component requires the following JavaScript plugins:

Example

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Top
Right
Bottom
Left
Twig 
<div class="size-full flex flex-col gap-8 items-center justify-center">
	<div x-tooltip data-position="top">
		<button x-tooltip:trigger class="rounded font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Show on top</button>
		<span x-cloak x-tooltip:content class="bg-gray-90 whitespace-pre text-gray-5 rounded p-2">Top</span>
	</div>
	<div x-tooltip data-position="right">
		<button x-tooltip:trigger class="rounded font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Show on right</button>
		<span x-cloak x-tooltip:content class="bg-gray-90 whitespace-pre text-gray-5 rounded p-2">Right</span>
	</div>
	<div x-tooltip data-position="bottom">
		<button x-tooltip:trigger class="rounded font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Show on bottom</button>
		<span x-cloak x-tooltip:content class="bg-gray-90 whitespace-pre text-gray-5 rounded p-2">Bottom</span>
	</div>
	<div x-tooltip data-position="left">
		<button x-tooltip:trigger class="rounded font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Show on left</button>
		<span x-cloak x-tooltip:content class="bg-gray-90 whitespace-pre text-gray-5 rounded p-2">Left</span>
	</div>
</div>