CCHub Logo CCHub Tailwind Collection
Komponenten Quickinfo Tooltip-Komponente

Tooltip-Komponente

Tooltip-Komponente mit Skeuomorphismus-Stil, Komplementärfarbschema, Einfache Komplexität, für E-Commerce.

Vorschau

HTML-Code 

<div class="relative inline-block">
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded shadow-md dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200">Hover over me</button>
  <div class="hidden absolute z-10 px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-700 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-600">
    Tooltip content
    <div class="tooltip-arrow"></div>
  </div>
</div>

<style>
.tooltip:hover + div {
  display: block;
  opacity: 1;
}

.tooltip-arrow,
.tooltip-arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip-arrow {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-bottom-color: #4a5568;
}

.dark .tooltip-arrow {
  border-bottom-color: #4a5568;
}


.tooltip-arrow:after {
  bottom: 1px;
  margin-left: -5px;
  border-width: 5px;
  border-bottom-color: #4a5568;
}

.dark .tooltip-arrow:after {
  border-bottom-color: #4a5568;
}
</style>

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

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.

Offen

Tooltip-Komponente

Eine minimalistische und flache Design-Tooltip-Komponente für Event-/Konferenz-Websites mit einem Schwarz-Weiß-Farbschema mit einem hellen Akzent.

Offen