La información sobre herramientas es como un globo o también una sugerencia de pantalla pequeña que muestra descripciones de texto para cualquier objeto en una página web. 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 y jQuery.
¿Qué es jQuery?
jQuery es una biblioteca de JavaScript que hace que la manipulación de las propiedades HTML DOM (Document Object Model) sea muy sencilla. Así que empecemos.
Paso 1: primero importe todo el CDN de Bootstrap para Bootstrap CSS desde el sitio web oficial de Bootstrap.
Bootstrap CSS:
<enlace href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integridad=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anónimo” >
BootstrapJS:
<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”></script>
Paso 2: importe el enlace de jQuery al archivo HTML desde el sitio web oficial de jQuery CDN.
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”> </script>
Paso 3: Para crear una información sobre herramientas, tenemos que 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, tenemos que agregar el atributo ‘título’ al elemento HTML.
<button type=”button” id=”tooltip” class=”btn btn-secondary” data-bs-toggle=”tooltip” data-bs-placement=”bottom” title=”Información sobre herramientas en la parte inferior”>
Información sobre herramientas en la parte inferior
< /botón>
(Aquí 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 similar).
Paso 4: después de eso, agregue el código jQuery al archivo HTML que se proporciona a continuación dentro de la etiqueta del script:
<script>
var tool = $("#tooltip");
var tooltip = new bootstrap.Tooltip(tool, {
boundary: $("body")
})
</script>
Aquí, en el código anterior, usamos la función Tooltip() para hacer que la información sobre herramientas se active al pasar el mouse por encima.
Nota: Aquí hemos colocado el texto de información sobre herramientas en la parte inferior, puede colocarlo a la izquierda, a la derecha o arriba usando el atributo «data-bs-placement». Aquí, lo hemos configurado en «abajo».
Paso 5: Por lo tanto, hemos creado con éxito la información sobre herramientas en Bootstrap usando jQuery.
Aquí está el código HTML completo:
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"
/>
<style>
button {
margin: 4em;
}
</style>
<title>Document</title>
</head>
<body>
<button
type="button"
id="tooltip"
class="tool btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="Tooltip on bottom"
>
Tooltip on bottom
</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
type="text/javascript"
src=
"http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
<script>
var tool = $("#tooltip");
var tooltip = new bootstrap.Tooltip(tool, {
boundary: $("body"),
});
</script>
</body>
</html>
Producción:
Información sobre herramientas usando Bootstrap y jQuery
Información sobre herramientas de alineación
Ahora, después de eso, 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 de arranque. Hay cuatro opciones de ubicación disponibles con él. Están:
1. Superior: para colocar la información sobre herramientas en la parte superior del objeto.
Sintaxis:
<button type=”button” class=”btn btn-secundario” data-bs-toggle=”tooltip” data-bs-placement=”top” title=”…”>
…
</button>
2. Inferior: para colocar la información sobre herramientas en la parte inferior del objeto.
Sintaxis:
<button type=”button” class=”btn btn-secundario” data-bs-toggle=”tooltip” data-bs-placement=”bottom” title=”…”>
…
</button>
3. Izquierda: para colocar la información sobre herramientas a la izquierda del objeto.
Sintaxis:
<button type=”button” class=”btn btn-secundario” data-bs-toggle=”tooltip” data-bs-placement=”left” title=”…”>
…
</button>
4. Derecha: para colocar la información sobre herramientas a la derecha del objeto.
Sintaxis:
<button type=”button” class=”btn btn-secundario” data-bs-toggle=”tooltip” data-bs-placement=”bottom” title=”…”>
…
</button>
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA