Skip to main content
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
HTML 
<div class="p-12 space-y-12">
  <div data-part="tooltip-root" data-placement="top" class="relative isolate">
    <button
      data-part="tooltip-trigger"
      type="button"
      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-4 focus:outline-offset-4 focus:outline-blue-40v cursor-pointer"
    >
      Show on top
    </button>
    <div
      data-part="tooltip-content"
      class="bg-gray-90 rounded-sm text-gray-5 p-2 whitespace-pre z-50 w-auto data-[state=open]:opacity-100 opacity-0 absolute transition-opacity duration-100 ease-in-out after:block after:absolute after:h-2 after:w-2 after:bg-inherit after:rotate-45 after:translate-(--caret-translate) after:left-(--caret-left) after:top-(--caret-top)"
    >Top</div>
  </div>


   <div data-part="tooltip-root" data-placement="right" class="relative isolate">
    <button
      data-part="tooltip-trigger"
      type="button"
      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-4 focus:outline-offset-4 focus:outline-blue-40v cursor-pointer"
    >
      Show on right
    </button>
    <div
      data-part="tooltip-content"
      class="bg-gray-90 rounded-sm text-gray-5 p-2 whitespace-pre z-50 w-auto data-[state=open]:opacity-100 opacity-0 absolute transition-opacity duration-100 ease-in-out after:block after:absolute after:h-2 after:w-2 after:bg-inherit after:rotate-45 after:translate-(--caret-translate) after:left-(--caret-left) after:top-(--caret-top)"
    >Right</div>
  </div>


   <div data-part="tooltip-root" data-placement="bottom" class="relative isolate">
    <button
      data-part="tooltip-trigger"
      type="button"
      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-4 focus:outline-offset-4 focus:outline-blue-40v cursor-pointer"
    >
      Show on bottom
    </button>
    <div
      data-part="tooltip-content"
      class="bg-gray-90 rounded-sm text-gray-5 p-2 whitespace-pre z-50 w-auto data-[state=open]:opacity-100 opacity-0 absolute transition-opacity duration-100 ease-in-out after:block after:absolute after:h-2 after:w-2 after:bg-inherit after:rotate-45 after:translate-(--caret-translate) after:left-(--caret-left) after:top-(--caret-top)"
    >Bottom</div>
  </div>


   <div data-part="tooltip-root" data-placement="left" class="relative isolate">
    <button
      data-part="tooltip-trigger"
      type="button"
      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-4 focus:outline-offset-4 focus:outline-blue-40v cursor-pointer"
    >
      Show on left
    </button>
    <div
      data-part="tooltip-content"
      class="bg-gray-90 rounded-sm text-gray-5 p-2 whitespace-pre z-50 w-auto data-[state=open]:opacity-100 opacity-0 absolute transition-opacity duration-100 ease-in-out after:block after:absolute after:h-2 after:w-2 after:bg-inherit after:rotate-45 after:translate-(--caret-translate) after:left-(--caret-left) after:top-(--caret-top)"
    >Left</div>
  </div>
</div>