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 95

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

4.1k
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

9 months ago

640
Tooltip - Right Aligned

Prashant

4 years ago

10.6k
Popover
basic popover example

Dipti narayan

3 years ago

13.8k
User | Author profile card

Computer guy

3 years ago

8.4k
Hero section for website

Leon Bachmann

3 years ago

12.4k
Profile Card
Responsive modern profile card

Rajesh Maheshwari

1 year ago

1.1k
Facts
A simple facts overview

Matti

1 year ago

2.5k
Popover
basic popover example

Dipti narayan

3 years ago

13.8k
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Quentin Rivers

2 years ago

7.7k
Call to Action section
CTA with clear message and big button

magersa

2 years ago

5.3k