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 69

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

575
Tooltip - Right Aligned

Prashant

4 years ago

10.6k
Popover
basic popover example

Dipti narayan

3 years ago

13.7k
Native tooltip
tooltip

Cristian

2 years ago

3.9k
Table template

Lukas Müller

3 years ago

17k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

2.9k
Landing page Diskominfo
the modern, elegant, and responsive landing page for Dinas Komunikasi dan Informatika

Alif Bima Pradana

6 months ago

429
htmlbasics

Anonymous

1 year ago

1.5k
File Upload
Image or file upload card

Khalid

2 years ago

3.9k
Hero

ABDO-SY

1 year ago

1.8k
Responsive Navbar Example
A working example of the navbar

Noob

4 years ago

17.9k