CCHub Logo CCHub Tailwind Collection
Komponenten Quickinfo Glasmorphismus Tooltip

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.

Vorschau

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

Minimalistischer Tooltip

Eine einfache und minimalistische Tooltip-Komponente mit Unterstützung für dunkle Themen und responsiven Effekten, die mit Tailwind CSS erstellt wurde. Es wird kein JavaScript verwendet, sondern nur HTML und CSS.

Offen

Tooltip-Komponente

Tooltip-Komponente mit Skeuomorphismus-Stil, Komplementärfarbschema, Einfache Komplexität, für E-Commerce.

Offen

Skeuomorphe Tooltip-Komponente

Eine reaktionsschnelle Tooltip-Komponente, die mit Skeuomorphismus und lebendigen Farben entwickelt wurde und sich für Blogs und den Konsum von Inhalten eignet. Es enthält Unterstützung für dunkle Themen mit Tailwind CSS.

Offen