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

2.9k

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

Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

3 years ago

11.5k
Simple Btn animation

Author:
Ranit Saha

11 months ago

1.8k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

2 years ago

6k
Get the app section
Play store and App store buttons

Author:
Sophia Baker

2 years ago

9.6k
Neo-Brutalism UI Button Collection - Bold CSS Button Styles withTailwind CSS
Bold, chunky neo-brutalism buttons with thick borders and strong shadows for modern web design. Explore our collection of vibrant, high-contrast CSS buttons with hover effects and dark mode support.

Author:
Homayoun

1 month ago

365
Buttons popup on hover
Popup buttons on hover

Author:
Sophia Baker

2 years ago

14.3k
Linkedin login/signup button

Author:
Shakti

2 years ago

13.2k
Button Group

Author:
Prem..

3 years ago

9.7k
buttons group
some attractive button group on different varients primary, outlined and link button

Author:
Akram Khan

1 year ago

1.8k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

8 months ago

888
Call to action buttons
Pair of active primary and secondary buttons. Elevated buttons w/ border bottom

Author:
Hyun-woo Cho

2 years ago

9.6k
Contact Spinner
Contact button spinning

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.5k

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

© 2025 TailwindFlex. All Rights Reserved.

v1.12