CCHub Logo CCHub Tailwind Collection
Komponenten Quickinfo Neumorphe Tooltip-Komponente

Neumorphe Tooltip-Komponente

Eine ausgeklügelte Tooltip-Komponente im Neumorphism-Stil, die für Unternehmenswebsites geeignet ist, lebendige Farben verwendet und für die Unterstützung des Dunkelmodus entwickelt wurde.

Vorschau

HTML-Code 

<div class="relative group flex items-center">
    <!-- Tooltip Trigger -->
    <button class="bg-purple-600 text-white rounded-full p-2 shadow-lg focus:outline-none">
        Hover me
    </button>

    <!-- Tooltip -->
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-sm rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out z-10">
        <div class="p-3">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <span class="font-semibold">John Doe</span>
            </div>
            <p class="mt-2">This is a tooltip description to provide additional information.</p>
        </div>
        <div class="rounded-lg bg-purple-600 p-2 text-white text-center font-bold transition-transform transform hover:scale-105">Learn More</div>
    </div>
</div>

Verwandte Komponenten

Memphis_Real_Estate_Tooltip

Eine einfache, reaktionsschnelle Tooltip-Komponente für Immobilienanwendungen, die sich durch eine vom Memphis Design inspirierte Ästhetik mit einer monochromen Basis und einer lebendigen Akzentfarbe auszeichnet. Enthält Unterstützung für den Dunkelmodus.

Offen

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

Minimalistischer Pastell-Tooltip

Eine minimalistische und flache QuickInfo-Komponente, die für Geschäfts- und Unternehmenswebsites mit Pastellfarben, responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS entwickelt wurde.

Offen