Tooltips without Javascript

This tailwind example is contributed by Sherry Lynne, on 17-Aug-2026. Component is made with Tailwind v3.4. It is responsive.

Tooltip

Author Sherry Lynne

Tailwind v3.4 72

Fork Fullscreen

<div class="bg-white font-sans font-light text-black w-screen">
  <div class="p-1">
    <h1 class="text-4xl py-3">Tooltip as Icon Button</h1>
    <p>I have an icon you can click or hover or focus to get help. 
      
      <button aria-describedby="tooltip-info-1" type="button" aria-label="trigger tooltip" style="anchor-name: --tooltip-btn-1;" 
      class="select-none focus:outline-2 focus:outline-offset-2 h-4 w-4 mr-1 bg-sky-700 text-xs px-1 font-medium font-serif rounded-full text-white inline-block peer">
        i
      </button>
        
      <span id="tooltip-info-1" role="tooltip" style="position-anchor: --tooltip-btn-1; position-area: bottom; position-try: bottom right, top left;" 
      class="absolute hidden hover:block peer-hover:block peer-focus:block bg-neutral-800 text-white text-xs p-2 m-1 rounded max-w-xs md:max-w-sm">
        Tooltip text short.
      </span>
      
      There can even be additional text after the tooltip button.
    </p>
    <p>I have an icon too.
      
      <button aria-describedby="tooltip-info-2" type="button" aria-label="trigger tooltip" style="anchor-name: --tooltip-btn-2;" 
      class="select-none focus:outline-2 focus:outline-offset-2 h-4 w-4 mr-1 bg-sky-700 text-xs px-1 font-medium font-serif rounded-full text-white inline-block peer">
        i
      </button>
      
      <span id="tooltip-info-2" role="tooltip" style="position-anchor: --tooltip-btn-2;  position-area: bottom; position-try: bottom right, top left;" 
      class="absolute hidden hover:block peer-hover:block peer-focus:block bg-neutral-800 text-white text-xs p-2 m-1 rounded max-w-xs md:max-w-sm">
        Floating tooltip text that is longer asdf asdf sdf dsf asdf dsf dsf dsf ds fsdf dsa rrrr sdfg sdfg dsfg dsfg sdfg.
      </span>
    </p>
    <h2 class="text-3xl py-3">Tooltip over text</h2>
    <p>On rare occasions the tooltip is 
      
      <button aria-describedby="tooltip-info-3" type="button" aria-label="trigger tooltip" style="anchor-name: --tooltip-btn-3;" 
      class="select-none focus:outline-2 focus:outline-offset-2 underline decoration-dotted underline-offset-4 decoration-sky-400 peer inline">
        1-2 words
      </button>.
      
      <span id="tooltip-info-3" role="tooltip" style="position-anchor: --tooltip-btn-3; position-area: bottom; position-try: bottom right, top left;" 
      class="absolute hidden hover:block peer-hover:block peer-focus:block bg-neutral-800 text-white text-xs p-2 m-1 rounded max-w-xs md:max-w-sm">
        To provide clarification or a definition, for example. 
      </span>
    </p>
    <p>
    Additonal text to show that they items display correctly when layered above other items.</p>
  </div>
</div>

Related Examples

tooltip Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.3k
Native tooltip
tooltip

Cristian

2 years ago

3.9k
Tooltip
A modern tooltip component with a gradient action button and smooth hover animation. Built using Tailwind CSS and custom styles, it provides clear, accessible hints with a polished UI and responsive behavior.

Rupesh

8 months ago

576
Popover
basic popover example

Dipti narayan

3 years ago

13.7k
Tooltip - Right Aligned

Prashant

4 years ago

10.6k
Contact us section
Minimal contact us form

Leon Bachmann

3 years ago

13k
Responsive list

Sienna

3 years ago

12.8k
Minimal coming soon page
Temporary placeholder for website landing page

Freja Jensen

3 years ago

13.2k
card appetizer
ss

Anonymous

1 year ago

2.2k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Kirsten F

1 year ago

1.5k
Tailwind Footer with dark version
This example can be used if you are looking for four column footer in dark version with sitemap links, brand logo, and social media accounts.

Pagedone

2 years ago

4.4k