CCHub Logo CCHub Tailwind Collection
Komponenten Quickinfo Tooltip-Komponente

Tooltip-Komponente

Eine einfache, reaktionsschnelle Tooltip-Komponente, die für den Konsum von Blog-Inhalten entwickelt wurde, mit einem 3D-Design mit einem Graustufen-Farbschema und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="relative group">
    <!-- Tooltip Trigger -->
    <button class="bg-gray-800 text-white p-2 rounded">Hover me!</button>
    
    <!-- Tooltip -->
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-white text-black text-sm rounded shadow-lg transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-gray-700 dark:text-white">
        <div class="p-2">
            <p>This is a tooltip with 3D styling!</p>
        </div>
        <div class="absolute left-1/2 top-full transform -translate-x-1/2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white dark:border-t-gray-700"></div>
    </div>
</div>

Verwandte Komponenten

Neumorpher Tooltip

Neumorpher Tooltip für Portfolio

Offen

Tooltip-Komponente

Eine komplexe, reaktionsschnelle, von Dark-Themes unterstützte Skeuomorphic-Vibrant Tooltip-Komponente für Dashboards mit Tailwind CSS. Kein JavaScript erforderlich, nur HTML mit Tailwind-Klassen. Verwenden Sie für den Dunkelmodus das Präfix dark: von Tailwind für das Styling. Die Bilder stammen von picsum.photos und randomuser.me.

Offen

Bauhaus_Autumn_Tooltip_Component

Eine vom Bauhaus inspirierte Tooltip-Komponente mit herbstlichem Farbschema, die für Mode- und Beauty-Marken entwickelt wurde. Verfügt über ein funktionales geometrisches Design, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

Offen