Tooltip Neumorfico
Tooltip neumorfico per il portfolio
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
<div class="relative flex items-center group">
<button class="px-6 py-3 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-800 dark:text-gray-200 font-semibold focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition-all duration-300">
Hover Me
</button>
<div class="absolute bottom-full mb-3 hidden group-hover:block px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 text-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
This is a neumorphic tooltip!
<div class="absolute left-1/2 transform -translate-x-1/2 top-full w-0 h-0 border-t-8 border-t-gray-200 dark:border-t-gray-700 border-x-8 border-x-transparent"></div>
</div>
</div>
</div>
Componenti correlati
3D_Real_Estate_Tooltip
Un componente di descrizione comando moderatamente complesso e reattivo con elementi di progettazione 3D e una combinazione di colori caldi per il tramonto, adatto per gli annunci di proprietà immobiliari. Include il supporto per la modalità oscura.
Componente della descrizione comando
Un componente di descrizione comando reattivo con microinterazioni per il coinvolgimento dell'utente, con un tema scuro e animazioni accattivanti.
Tooltip minimalista
Un componente tooltip semplice e minimalista con supporto per il tema scuro ed effetti reattivi, creato utilizzando Tailwind CSS. Non viene utilizzato JavaScript, solo HTML e CSS.