Información sobre herramientas minimalista
Un componente de información sobre herramientas simple y minimalista con soporte para temas oscuros y efectos responsivos, creado con Tailwind CSS. No se utiliza JavaScript, solo HTML y CSS.
Código 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>Componentes relacionados
Bauhaus_Autumn_Tooltip_Component
Un componente de información sobre herramientas inspirado en la Bauhaus con una combinación de colores otoñales, diseñado para marcas de moda y belleza. Cuenta con un diseño geométrico funcional, capacidad de respuesta y compatibilidad con el modo oscuro.
Descripción emergente monocromática brutalista
Un complejo componente de información sobre herramientas monocromático de estilo brutalista diseñado para sitios de blogs/contenido, con múltiples elementos interactivos y capacidad de respuesta completa con soporte para modo oscuro.
Información sobre herramientas
Componente de información sobre herramientas con diseño 3D, tonos de tierra, complejidad simple y propósito del tablero. Responsivo con soporte para temas oscuros.