Componenti Descrizione comando Componente della descrizione comando

Componente della descrizione comando

Componente Tooltip con stile Skeuomorphism, Combinazione di colori complementari, Complessità semplice, per E-commerce.

Anteprima

Codice HTML

<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>

Componenti correlati

Componente della descrizione comando

Un componente tooltip dal design minimalista e piatto per siti Web di eventi/conferenze, caratterizzato da una combinazione di colori in bianco e nero con un accento luminoso.

Aperto

Glassmorphism Monocromatico Semplice Tooltip

Un componente di descrizione comando semplice, reattivo e compatibile con la modalità scura con uno schema di colori monocromatico in stile Glassmorphism per blog e siti di contenuti.

Aperto

RetroTooltip

Un componente tooltip semplice e reattivo con stile Retrò/Vintage e combinazione di colori in scala di grigi, adatto per siti Web aziendali. Supporta il tema scuro.

Aperto