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

10

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

App store & Google playstore buttons

Author:
Dika Rahman

1 year ago

2.6k
tradition music
by salvator

Author:
Baraka Salvator

8 months ago

841
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
Anonymous

2 years ago

13.4k
Buttons variations

Author:
R.P Ketan

2 years ago

10k
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

3k
Life Tree
by salvator

Author:
Baraka Salvator

8 months ago

933
Social Share
A social media showcase

Author:
Rajesh Maheshwari

11 months ago

889
Plug and Play Button - Animated gradient background
Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

1 year ago

1.8k
Gold Premium Button
🪙 Glowing Premium BIP Gold Button in pue Tailwind CSS

Author:
Arnav K

2 years ago

5.6k
Old style Button Designs

Author:
Amit Pachange

3 years ago

10.1k
Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

3 years ago

10.6k
Button
Button When Hover and page Reload then Button text will show the animation

Author:
Chitranshu

1 year ago

2.6k

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