CCHub Logo CCHub Tailwind Collection
Komponenten Quickinfo Quickinfo

Quickinfo

Tooltip-Komponente mit 3D-Design, Erdtönen, einfacher Komplexität und Dashboard-Zweck. Reaktionsschnell mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="relative flex items-center group">
  <span clas="underline">Hover Over Me</span>
  <div class="absolute bottom-full mb-2 hidden group-hover:block px-3 py-2 text-sm font-medium text-white transition-all duration-500 ease-in-out transform bg-gray-800 rounded-md shadow-lg dark:bg-gray-700 -translate-x-1/2 left-1/2
   before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-8 before:border-x-transparent before:border-b-transparent before:border-t-gray-800 dark:before:border-t-gray-700">
    Tooltip content
  </div>
</div>

Verwandte Komponenten

Microinteractions Tooltip-Komponente

Eine einfache, aber ansprechende Tooltip-Komponente mit subtilen Mikrointeraktionsanimationen, responsivem Design und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurden. Es ist kein JavaScript erforderlich.

Offen

Glasmorphismus Tooltip

Eine Tooltip-Komponente, die im Glassmorphism-Stil gestaltet wurde und dunkles Design und responsives Design unterstützt und für Social-Media-Schnittstellen geeignet ist.

Offen

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.

Offen