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.

Anteprima

Codice HTML

<div class="relative inline-block">
  <button class="text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-md font-mono">Hover Me</button>
  <div class="invisible absolute z-10 top-full left-1/2 transform -translate-x-1/2 mt-2 w-48 p-2 bg-gray-800 dark:bg-gray-200 text-gray-200 dark:text-gray-800 text-sm rounded shadow-lg opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100">
    <p class="font-mono">This is a retro-style tooltip!</p>
  </div>
</div>

Componenti correlati

Componente della descrizione comando neumorfica

Un sofisticato componente tooltip in stile neumorfismo adatto per siti Web aziendali, che utilizza colori vivaci e progettato per il supporto della modalità scura.

Aperto

Componente della descrizione comando

Un componente di descrizione comando neumorfico con una combinazione di colori complementari, una complessità moderata e un design reattivo con supporto per temi scuri, adatto per un blog o per il consumo di contenuti.

Aperto

Tooltip Neumorfico

Tooltip neumorfico per il portfolio

Aperto