RetroTooltip
Eine einfache und reaktionsschnelle Tooltip-Komponente im Retro/Vintage-Stil und Graustufen-Farbschema, die für Unternehmenswebsites geeignet ist. Unterstützt dunkles Design.
HTML-Code
<div class="relative inline-block">
<button class="text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-md font-mono">Hover Me</button>
<div class="invisible absolute z-10 top-full left-1/2 transform -translate-x-1/2 mt-2 w-48 p-2 bg-gray-800 dark:bg-gray-200 text-gray-200 dark:text-gray-800 text-sm rounded shadow-lg opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100">
<p class="font-mono">This is a retro-style tooltip!</p>
</div>
</div>Verwandte Komponenten
Tooltip-Komponente
Eine minimalistische, flach gestaltete Tooltip-Komponente für Gaming-Oberflächen mit Schwarz, Weiß und einer hellen Akzentfarbe, mit komplexen interaktiven Elementen und voller Reaktionsfähigkeit, einschließlich Unterstützung des Dunkelmodus.
Retro-Tooltip-Komponente
Eine Tooltip-Komponente im Retro-/Vintage-Stil mit responsiven Effekten und Unterstützung für den Dunkelmodus.
Skeuomorphe Tooltip-Komponente
Eine komplexe Tooltip-Komponente mit einem skeuomorphen Stil und Erdtönen, die für E-Commerce-Anwendungen mit Unterstützung des Dunkelmodus geeignet ist.