Componente della descrizione comando
Componente Tooltip con stile Skeuomorphism, Combinazione di colori complementari, Complessità semplice, per E-commerce.
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 delle microinterazioni
Un componente di suggerimento semplice ma coinvolgente con sottili animazioni di microinterazione, design reattivo e supporto per temi scuri costruito con Tailwind CSS. Non è richiesto alcun JavaScript.
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.
Descrizione comando pastello minimalista
Un componente di descrizione comando minimale e piatto progettato per siti Web aziendali e aziendali con colori pastello, design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.