Glassmorphism Tooltip
Un componente tooltip progettato con lo stile glassmorphism, che supporta il tema scuro e il design reattivo, adatto per le interfacce dei social media.
Codice HTML
<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>Componenti correlati
Descrizione comando
Componente tooltip con design 3D, toni della terra, complessità semplice e scopo del cruscotto. Reattivo con supporto per il tema scuro.
Componente della descrizione comando
Un componente di descrizione comando di Material Design reattivo con combinazione di colori monocromatici per l'e-commerce, con supporto per la modalità scura. Niente JavaScript, HTML e Tailwind CSS.
Minimalist_Tooltip
Componente tooltip di design minimalista/piatto per l'e-commerce con design reattivo e supporto per temi scuri. Utilizza una combinazione di colori Complementare e ha una complessità Moderata.