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.
Codice HTML
<div class="group relative inline-block">
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Hover over me</button>
<div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible absolute z-10 px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-700 dark:bg-gray-800 rounded-md shadow-sm">
Tooltip text
<svg class="absolute text-gray-700 dark:text-gray-800 h-2 w-full left-0 bottom-[-8px]" x="0px" y="0px" viewBox="0 0 25 25" xml:space="preserve"><polygon class="fill-current" points="0,0 12.5,25 25,0"/></svg>
</div>
</div>Componenti correlati
Descrizione comando
Componente tooltip con design 3D, toni della terra, complessità semplice e scopo del cruscotto. Reattivo con supporto per il tema scuro.
Paper_Rainbow_Tooltip_Component
Un componente di descrizione comando semplice e reattivo con un design ispirato alla carta/stampa e uno sfondo sfumato arcobaleno, adatto per piattaforme di forum/community. Include il supporto per la modalità oscura.
Componente Tooltip - Scala di grigi Art Déco
Un complesso componente di suggerimento ispirato all'Art Déco per la documentazione e i siti wiki, con una combinazione di colori in scala di grigi, motivi geometrici e contenuti ricchi. Completamente reattivo con supporto per la modalità oscura.