Tooltip con degradado

Un tooltip de degradado de color, con flecha a juego, que sube desde una pequeña etiqueta al pasar el ratón.

Ajustes

Color principal#0071e3

Color secundario#8ec5ff

Tamaño16px

Velocidad1x

Texto

Código

index.html

<span class="uv-tg">Info<span>Nueva función disponible</span></span>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Tooltips

Tooltip con rebote

TooltipsHTML + CSS

Tooltip que sigue al ratón

TooltipsHTML + CSS

Tooltip con retraso y desenfoque

TooltipsHTML + CSS

Tooltip orbital

TooltipsHTML + CSS

Tooltip de atajo de teclado

TooltipsHTML + CSS

Tooltip con vista previa

TooltipsHTML + CSS

Tooltip dividido

TooltipsHTML + CSS

Tooltip con destello

TooltipsHTML + CSS

Dónde usarlo

Este tooltip con degradado sirve muy bien para anunciar cosas. Ponlo en una etiqueta de «Nuevo» o «Info» junto a un elemento del menú, en el aviso de beta de un panel o al lado de un término de precios que necesita una explicación rápida. Sube unos píxeles mientras aparece y su flecha se funde con el degradado.

Solo reacciona al hover, así que quien usa teclado o pantalla táctil puede perdérselo: no pongas ahí nada crítico. Colores cercanos dan una burbuja suave; colores que contrastan hacen que parezca más una promoción.