Glassmorphism Tooltip
A tooltip component designed with glassmorphism style, supporting dark theme and responsive design, suitable for social media interfaces.
HTML Code
<div class="relative group inline-block">
<img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full" />
<span class="absolute bottom-12 left-1/2 transform -translate-x-1/2 bg-white bg-opacity-30 backdrop-blur-sm border border-gray-200 p-2 rounded-md shadow-lg text-gray-900 text-sm transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100 dark:bg-gray-800 dark:bg-opacity-50 dark:border-gray-600 dark:text-white">
<span class="font-bold">Your Tooltip Title</span>
<p>This is a tooltip with glassmorphism design, making your social media interface more engaging!</p>
</span>
</div>Related Components
Tooltip Component
A responsive dark-themed tooltip component, part of a Triadic color scheme, suitable for a portfolio. Built with Tailwind CSS for a simple, minimal aesthetic.
3D_Real_Estate_Tooltip
A moderately complex, responsive tooltip component with 3D design elements and a warm sunset color scheme, suitable for real estate property listings. Includes dark mode support.
Material Design Tooltip Component - Booking/Reservation
A complex, responsive Material Design-inspired tooltip component for booking/reservation systems, featuring muted/desaturated colors, depth effects, and dark mode support. It provides detailed information upon hover/focus.