CCHub Logo CCHub Tailwind Collection
Komponenten Quickinfo Glasmorphismus Monochromatisch Einfacher Tooltip

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.

Vorschau

HTML-Code 

<div class="relative flex items-center justify-center">
  <button class="text-gray-800 dark:text-gray-200 focus:outline-none">Hover me</button>
  <div class="absolute bottom-full mb-2 hidden px-3 py-2 text-sm font-semibold text-white bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-md shadow-sm dark:bg-gray-800 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg group-hover:block">Tooltip content</div>
</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

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.

Offen

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.

Offen