Crear un botón de información sobre herramientas simple en HTML

Migel Hewage Nimesha 20 junio 2023

HTML HTML Tooltip

Información sobre herramientas en HTML
Información sobre herramientas básica para el botón usando HTML
Información sobre herramientas avanzada para el botón usando HTML y CCS
Información sobre herramientas de posicionamiento
Conclusión

Crear un botón de información sobre herramientas simple en HTML

El lenguaje de marcado de hipertexto, también conocido como HTML, es un lenguaje de marcado estándar que se utiliza para crear páginas web. Los elementos HTML proporcionan los comandos de un navegador web sobre cómo mostrar texto, imágenes y otros elementos multimedia en una página web.

Información sobre herramientas en HTML

En HTML, se utiliza una información sobre herramientas para proporcionar más información sobre el elemento seleccionado; puede ser un botón o una palabra. Cuando un usuario mueve el mouse sobre un elemento utilizando una información sobre herramientas para mostrar información específica sobre ese elemento, esto se puede hacer con el efecto de desplazamiento del mouse.

Veamos cómo agregar una información sobre herramientas al botón.

Podemos agregar una información sobre herramientas al botón usando el atributo título para el elemento botón. Ingrese los detalles dentro de las comas del atributo título, que desea mostrar cuando el usuario mueve el mouse.

<button title="Click Here"> Button </button>

Información sobre herramientas básica para el botón usando HTML

Crear un botón en HTML. Luego, agregue el atributo título al elemento botón.

El código de ejemplo es el siguiente.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a simple button & Adding a tooltip to button -->
            <button title="Click Here">Button</button>
    </body>
</html>

Como puede ver, cuando el mouse se mueve sobre el botón, aparece la información sobre herramientas.

Información sobre herramientas avanzada para el botón usando HTML y CCS

Veamos otros ejemplos de información sobre herramientas avanzada para el botón.

En primer lugar, cree un botón usando un elemento contenedor (<div>) y agregue una clase de información sobre herramientas. Este <div> mostrará el texto de información sobre herramientas cuando el usuario pase el mouse sobre él.

Se utiliza un elemento en línea de estilo <span> con class="tooltiptext" para contener el texto de información sobre herramientas.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

Crear un archivo CSS

Vamos a crear un archivo CSS llamado style.css y vincularlo al archivo HTML incluyendo la siguiente sintaxis entre las etiquetas <head> en HTML.

<link rel="stylesheet" href="style.css">

Vamos a diseñar el botón de información sobre herramientas usando CSS. El estilo del botón se incluye dentro de la clase .button.

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
 }

La clase .tooltip se utiliza para mostrar la posición de la información sobre herramientas.

.tooltip {
    position: relative;
    display: inline-block;
}

El texto de información sobre herramientas se almacena en la clase .tooltiptext. Normalmente está oculto, pero se vuelve visible cuando pasas el cursor sobre él.

Además, le agregamos algunos estilos fundamentales, como se muestra a continuación.

Un ancho de 120px
Un fondo amarillo
Un color de texto blanco
La capacidad de centrar el texto
Relleno superior e inferior de 5px

El texto de la información sobre herramientas tiene bordes redondeados debido a la función border-radius de CSS.

Cuando un usuario arrastra el cursor sobre un elemento <div> con la clase información sobre herramientas, el texto de la información sobre herramientas se muestra usando el selector flotante.

  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
 }

Información sobre herramientas de posicionamiento

Se puede hacer que la información sobre herramientas aparezca a la derecha, a la izquierda, en la parte inferior y en la parte superior del botón. Veamos cómo hacerlo.

Los siguientes ejemplos muestran cómo mostrar información sobre herramientas a la izquierda o a la derecha. La propiedad superior tiene un valor de menos 5 píxeles.

El valor se calcula considerando el relleno. Si está dispuesto a aumentar el relleno, aumente la propiedad superior.

Información sobre herramientas derecha

.tooltip .tooltiptext {

  /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}

  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
 }

Como puede ver, cuando el mouse se mueve en cualquier dirección, la información sobre herramientas solo aparece en el lado derecho.

Información sobre herramientas izquierda

.tooltip .tooltiptext {

  /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
}

  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    margin-left: 120px;
 }

Como puede ver, cuando el mouse se mueve en cualquier dirección, la información sobre herramientas solo aparece en el lado izquierdo.

Los siguientes ejemplos muestran cómo mostrar información sobre herramientas en la parte superior o inferior. La propiedad margin-left tiene un valor de menos 60 píxeles.

El valor se calcula por la mitad del ancho de la información sobre herramientas (120/2 = 60).

Información sobre herramientas superior

.tooltip .tooltiptext {
     /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    margin-top: 40px;
    margin-left: 120px;
 }

Como puede ver, cuando el mouse se mueve en cualquier dirección, la información sobre herramientas solo aparece en la parte superior.

Información sobre herramientas inferior

.tooltip .tooltiptext {
 /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    margin-left: 120px;
 }

Como puede ver, cuando el mouse se mueve en cualquier dirección, la información sobre herramientas solo aparece en la parte inferior.

Conclusión

Este artículo discutió cómo crear un botón de información sobre herramientas simple usando HTML. Luego, discutimos la creación de un botón de información sobre herramientas avanzado usando HTML y CSS y la visualización de información sobre herramientas a la derecha, izquierda, arriba y abajo del botón.

Autor: Migel Hewage Nimesha

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.