Agregar texto flotante en HTML

1. Use el atributo title para agregar un texto flotante en HTML
2. Use el atributo title con la etiqueta abbr para agregar un texto flotante en HTML

En este artículo, discutiremos algunas formas de agregar un texto flotante en HTML. Un texto flotante es un texto de información sobre herramientas que aparece cuando pasamos el mouse sobre un texto en HTML.

Use el atributo title para agregar un texto flotante en HTML

Podemos usar el atributo title para agregar un texto flotante en HTML. El atributo se puede utilizar con cualquier elemento HTML.

Da información adicional sobre el elemento. Cuando usamos el atributo title en un elemento, crea un texto de información sobre herramientas o un texto flotante cuando movemos el mouse sobre el elemento.

Por ejemplo, cree un botón Login con la etiqueta <button>. Escriba un atributo title en la etiqueta <button>.

A continuación, escriba el texto this is a login button como valor para el atributo title.

Cuando pasamos el mouse sobre el botón, un texto flotante dice this is a login button. Aquí, implementamos el atributo title con un botón, un elemento en línea.

De esta manera, podemos usar el atributo title para agregar un texto flotante en HTML.

Código de ejemplo:

<button title="this is a login button">
  Login
</button>

Use el atributo title con la etiqueta abbr para agregar un texto flotante en HTML

Este método analiza cómo podemos usar la etiqueta title para agregar texto flotante mientras usamos la etiqueta abbr. El atributo title y abbr se suelen utilizar juntos.

La etiqueta abbr se usa para escribir la abreviatura, y la etiqueta title se usa para mostrar la forma completa de la abreviatura durante el desplazamiento del mouse.

Por ejemplo, considere la frase The Undertaker es una superestrella de la WWE. Envuelve la palabra WWE con la etiqueta abbr.

En la etiqueta, escribe el atributo title y dale el valor World Wrestling Entertainment.

Como resultado, la palabra WWE aparece con un subrayado punteado. Cuando pasemos el cursor sobre él, aparecerá un texto flotante que dice World Wrestling Entertainment.

Así es como podemos usar el atributo title con la etiqueta abbr para crear un texto flotante en HTML.

Código de ejemplo:

The Undertaker is a <abbr title="World Wrestling Entertainment"> WWE </abbr> superstar.