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.
HTML-Code
<div class="group relative inline-block">
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Hover over me</button>
<div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible absolute z-10 px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-700 dark:bg-gray-800 rounded-md shadow-sm">
Tooltip text
<svg class="absolute text-gray-700 dark:text-gray-800 h-2 w-full left-0 bottom-[-8px]" x="0px" y="0px" viewBox="0 0 25 25" xml:space="preserve"><polygon class="fill-current" points="0,0 12.5,25 25,0"/></svg>
</div>
</div>Verwandte Komponenten
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.
Minimalist_Tooltip
Minimalistische/flache Design-Tooltip-Komponente für E-Commerce mit responsivem Design und Unterstützung für dunkle Themen. Verwendet ein komplementäres Farbschema und weist eine mittlere Komplexität auf.
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.