Una información sobre herramientas es como un globo o también una pequeña sugerencia de pantalla que muestra una descripción de texto para cualquier objeto. Se muestra información sobre herramientas cuando el usuario pasa el cursor sobre un objeto. Es una parte muy útil de un sitio web y ahora se puede encontrar en casi todos los sitios web, incluidas algunas aplicaciones web como Adobe Photoshop, Adobe Illustrator y muchas más. Una información sobre herramientas es muy útil para los nuevos usuarios, donde el usuario puede aprender sobre el objeto leyendo el texto de la información sobre herramientas.
Ahora, habiendo entendido el concepto básico de la información sobre herramientas, aprendamos cómo crear una información sobre herramientas utilizando el marco Bootstrap.
Crear una información sobre herramientas en Bootstrap:
Paso 1: primero importe todo el CDN de Bootstrap para Bootstrap CSS y JavaScript desde el sitio web oficial de Bootstrap.
<enlace href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integridad=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anónimo” >
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js” integridad=”sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ” origen cruzado =”anónimo”>
Paso 2: para crear una información sobre herramientas, debemos agregar el atributo ‘ data-bs-toggle ‘ a cualquier elemento, y para agregar el texto que debe mostrarse cuando la información sobre herramientas se desplaza, debemos agregar el atributo ‘título ‘ a el elemento HTML. También podemos definir la dirección del mensaje de información sobre herramientas en diferentes direcciones, como abajo, arriba, izquierda, derecha, etc. Para alinear la información sobre herramientas en diferentes posiciones, necesitamos el atributo ‘ data-bs-placement ‘ para el objeto bootstrap.
HTML
<button type="button" class=" tooltip btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"> Tooltip on top </button>
Hemos usado botones para mostrar el efecto de información sobre herramientas, pero también puede usar información sobre herramientas con otros componentes de arranque. El proceso es muy igual.
Paso 3: agregue la pieza de código JavaScript al archivo HTML que se muestra a continuación. Usamos la función Tooltip() para hacer que la información sobre herramientas se active al pasar el mouse. Hemos utilizado el ciclo forEach() para agregar las opciones de información sobre herramientas a todos los objetos que tienen la información sobre herramientas. También puede agregar la información sobre herramientas a cada objeto individual en el archivo HTML.
Javascript
<script>
const tooltips = document.querySelectorAll(".tooltip");
tooltips.forEach(t => {
new bootstrap.Tooltip(t);
});
</script>
Paso 4: Hemos creado con éxito la información sobre herramientas en Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<br>
<button type="button"
class="tool btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Tooltip on top">
Tooltip on top
</button>
<button type="button"
class="tool btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Tooltip on right">
Tooltip on right
</button>
<button type="button"
class="tool btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button"
class="tool btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="left"
title="Tooltip on left">
Tooltip on left
</button>
<!-- Bootstrap JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous">
</script>
<script>
const tooltips = document.querySelectorAll(".tool");
tooltips.forEach(t => {
new bootstrap.Tooltip(t);
});
</script>
</body>
</html>
Producción:
Nota: hemos mostrado el ejemplo con el componente de botón, puede aplicarlo a otros componentes como Párrafos, iconos también.
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA