Glasmorphismus Tooltip
Eine Tooltip-Komponente, die im Glassmorphism-Stil gestaltet wurde und dunkles Design und responsives Design unterstützt und für Social-Media-Schnittstellen geeignet ist.
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>Verwandte Komponenten
Glasmorphismus Monochromatisch Einfacher Tooltip
Eine einfache, reaktionsschnelle, mit dem Dunkelmodus kompatible QuickInfo-Komponente mit einem monochromatischen Farbschema im Glassmorphism-Stil für Blog- und Content-Websites.
3D_Real_Estate_Tooltip
Eine mäßig komplexe, reaktionsschnelle QuickInfo-Komponente mit 3D-Designelementen und einem warmen Farbschema für den Sonnenuntergang, die sich für Immobilienangebote eignet. Enthält Unterstützung für den Dunkelmodus.
Tooltip-Komponente
Eine minimalistische und flache Design-Tooltip-Komponente für Event-/Konferenz-Websites mit einem Schwarz-Weiß-Farbschema mit einem hellen Akzent.