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

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

macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 days ago

44
Button Group

Author:
Prem..

3 years ago

9.6k
Buttons set
buttons sets of, primary, outlined, text and link

Author:
Akram Khan

1 year ago

1.5k
shadcn Button
button

Author:
Cristian

1 year ago

2.3k
Amazon shopping buy now button
Amazon shopping buy now button

Author:
OmKar Mehta

1 year ago

1.8k
Buttons with border bottom

Author:
Prashant

3 years ago

12.3k
Google login/signup button
Styled button designed for users to log in or authenticate using their Google account. The button features a Google logo (represented by an SVG image) on the left and the text "Login with Google" on the right.

Author:
Shakti

2 years ago

39.5k
Motfx loading

Author:
Nyambat Byamba

1 year ago

2.2k
futuristic button

Author:
Crimson

9 months ago

793
Button with a gradient border using Tailwind CSS

Author:
Dipti narayan

2 years ago

12.4k
future ai robot
this an ai template by salvator

Author:
Baraka Salvator

5 months ago

763
Download on the App Store dark button

Author:
Simon Scheffer

2 years ago

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