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

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

Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

3 years ago

10.4k
Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

8 months ago

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

Author:
Raul antonio de la cruz hernandez

1 month ago

105
rgb border button

Author:
Akram Khan

1 year ago

1.8k
Button with loading

Author:
Prem..

3 years ago

18.9k
Sign up with google button

Author:
Laurits

2 years ago

40.3k
Buttons with Icon

Author:
_Amar_

3 years ago

15.6k
Beautiful animated button
on hover effect

Author:
Dika Rahman

1 year ago

4.7k
Buttons with border bottom

Author:
Prashant

3 years ago

12.2k
chair
by salvator

Author:
Baraka Salvator

4 months ago

458
Payment Button

Author:
Md. Tofayel islam

1 year ago

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

Author:
Sophia Baker

2 years ago

9.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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.1