Componente de información sobre herramientas
Un componente de información sobre herramientas simple y receptivo diseñado para el consumo de contenido de blog, con un diseño 3D con un esquema de color en escala de grises y soporte para el modo oscuro mediante Tailwind CSS.
Código HTML
<div class="relative group">
<!-- Tooltip Trigger -->
<button class="bg-gray-800 text-white p-2 rounded">Hover me!</button>
<!-- Tooltip -->
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-white text-black text-sm rounded shadow-lg transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-gray-700 dark:text-white">
<div class="p-2">
<p>This is a tooltip with 3D styling!</p>
</div>
<div class="absolute left-1/2 top-full transform -translate-x-1/2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white dark:border-t-gray-700"></div>
</div>
</div>
Componentes relacionados
Componente de información sobre herramientas
Un componente de información sobre herramientas minimalista y de diseño plano para interfaces de juego, con negro, blanco y un color de acento brillante, con elementos interactivos complejos y capacidad de respuesta completa, incluida la 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 del panel de control de Skeuomorphic
Un componente de información sobre herramientas complejo y esqueuomórfico para un tablero, con un esquema de color triádico y un diseño receptivo con soporte para modo oscuro, creado con Tailwind CSS y sin JavaScript.