CSS Tooltip

En este artículo te mostramos cómo usar HTML y CSS para crear tooltips.

El tooltip se activa cuando el mouse se mueve sobre el elemento especificado; veamos primero los siguientes cuatro ejemplos:

Tooltip básico

El tooltip se muestra cuando el mouse se mueve sobre el elemento especificado:

Explicación del ejemplo

HTML)Usa un elemento contenedor (como <div>) y agrega"tooltip"clase. Muestra la información del tooltip cuando el mouse se mueve sobre el <div>.

Coloca el texto del tooltip en un elemento en línea (como <span>) y usaclass="tooltiptext"。

CSS)tooltipUso de la claseposition:relative, el texto del tooltip necesita establecer un valor de posicionamiento.position:absolute。 Nota:Los siguientes ejemplos mostrarán más efectos de posicionamiento.

tooltiptextLa clase se usa para el texto real del tooltip. Está oculto de forma predeterminada y se muestra cuando el mouse se mueve sobre el elemento. Se establecen algunos estilos como ancho, color de fondo, color de fuente, etc.

CSS3 border-radiusLa propiedad se usa para agregar esquinas redondeadas al tooltip.

:hoverEl selector se usa para mostrar el tooltip cuando el mouse se mueve sobre el elemento especificado <div>.

Posicionar el Tooltip

En el siguiente ejemplo, el tooltip se muestra a la derecha del elemento especificado (left:105%) 。

Notatop:-5pxA diferencia de centrarlo en el elemento contenedor. Usa el número5porque el padding superior e inferior del texto del tooltip es de 5px.

Si modificas el valor de padding, el valor de top también debe modificarse en consecuencia, para asegurar que esté centrado.

El mismo principio se aplica cuando el tooltip se muestra a la izquierda.

Si quieres que el tooltip se muestre en la parte superior e inferior. Necesitamos usarmargin-leftla propiedad y establecerla en -60px. Este número se calcula usando la mitad del ancho para centrarlo, es decir: width/2 (120/2 = 60).

Agregar flecha

Podemos usar el pseudo-elemento CSS ::after y la propiedad content para crear una pequeña flecha para el tooltip. La flecha se compone de bordes, pero una vez combinados, el tooltip parece un cuadro de burbuja de voz.

El siguiente ejemplo muestra cómo agregar una flecha en la parte inferior a un tooltip que se muestra en la parte superior:

Explicación del ejemplo

Posicionar la flecha dentro del tooltip:top: 100%, la flecha se mostrará en la parte inferior del tooltip.left: 50%Se usa para centrar la flecha.

Nota:border-widthLa propiedad especifica el tamaño de la flecha. Si la modificas, también debes modificar elmargin-leftvalor. Así la flecha se mostrará centrada.

border-colorSe usa para convertir el contenido en una flecha. Establece el borde superior en negro y los demás en transparente. Si los demás también se establecen en negro, se mostrará como un cuadrilátero negro.

El siguiente ejemplo muestra cómo agregar una flecha en la parte superior del tooltip; observa cómo configurar el color del borde:

Los siguientes dos ejemplos son ejemplos de flechas en los lados izquierdo y derecho:

Efecto de fundido de entrada

Podemos usar la propiedad transition de CSS3 y la propiedad opacity para lograr el efecto de fundido de entrada del tooltip:

Más ejemplos

Bonito tooltip CSS