Home
Michael Andreuzza
tooltip Tailwind CSS and Alpinejs

tooltip Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Button Tooltip

Author Michael Andreuzza

3.1k

9

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<section>
 <div class="w-full text-center py-8 mx-auto flex flex-col justify-center h-svh">
  
  <div x-data="{ open: false, buttonHovered: false }" @mouseenter="open = true" @mouseleave="open = false" class="relative flex justify-center items-center duration-200"> <button @mouseenter="buttonHovered = true" @mouseleave="buttonHovered = false" type="button" class="inline-flex justify-center mx-auto w-auto rounded-full h-24 items-center border-2 border-gray-300 shadow-sm px-12 py-2 bg-white text-3xl font-medium text-orange-600 focus:outline-none focus:ring-2 hover:border-orange-600 focus:ring-offset-2 focus:ring-orange-600 duration-300">
    Poke me
   </button>
   
   <div x-show="open &amp;&amp; buttonHovered" class="absolute z-10 bottom-full mb-2 w-56 overflow-hidden h-20 justify-center items-center flex text-center rounded-md shadow-lg bg-orange-600" style="display: none;">
    <div role="menu" aria-orientation="vertical" aria-labelledby="options-menu"> <a href="#" class="block px-4 py-2 text-xl mx-auto text-white" role="menuitem">
      Hello pomelo, I am your tooltip!
     </a> </div>
   </div>
  </div>
 </div> 
 <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
  <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
   <div class="flex w-0 flex-1 items-center p-4">
    <div class="w-full">
     <p class="text-sm font-medium text-neutral-900">Tutorial</p>
     <p class="mt-1 text-sm text-neutral-500">
      How to create a tooltip Tailwind CSS and Alpinejs
     </p>
     <p class="mt-2 text-xs text-orange-600 underline"> <a href="https://lexingtonthemes.com"> by © Lexington Themes</a> </p>
    </div>
   </div>
   <div class="flex">
    <div class="flex flex-col divide-y divide-neutral-200">
     <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-tooltip-with-tailwind-css-and-alpinejs/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-600">Tutorial</a> </div>
     <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/tooltip/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-600">Get the code</a> </div>
    </div>
   </div>
  </div>
 </div> 
</section>

Related Examples

hero modern
hero modern

Author:
Omer fils ELENGA

2 weeks ago

51
SCROLL ABAJO
para poner que a llegado al final de la pagina

Author:
Raul antonio de la cruz hernandez

5 months ago

725
Gold Premium Button
🪙 Glowing Premium BIP Gold Button in pue Tailwind CSS

Author:
Arnav K

1 year ago

5.6k
button animation
button animation big

Author:
QQ-VVN

8 months ago

799
Sign in with facebook button

Author:
Conan Hilton

3 years ago

11.1k
Gradient Button
instagram: ferdiisahin

Author:
Anonymous

1 year ago

1.9k
Glowing gradient button
Button on black background

Author:
Md. Abu Taher

2 years ago

12.5k
Listen on Spotify/Apple Music Button

Author:
Patricio Garcia

1 year ago

2.7k
App Store Button

Author:
Arya

3 years ago

10.2k
Old style Button Designs

Author:
Amit Pachange

3 years ago

10.1k
View More Button

Author:
Amit Pachange

3 years ago

19.4k
less is more
less is more by salvator

Author:
Baraka Salvator

7 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12