En Bootstrap 4 , puede colocar la información sobre herramientas en varias direcciones (izquierda, derecha, arriba, abajo). El posicionamiento de la información sobre herramientas se establece mediante el uso de la biblioteca de terceros (Popper.js) antes de bootstrap.js para que la información sobre herramientas funcione.
Enfoque: el marcado requerido para colocar información sobre herramientas está en la ubicación de datos , donde puede configurar la información sobre herramientas para
- Abajo
- Derecha
- Parte superior
- Izquierda
Enlaces CDN: incluya los siguientes archivos en la sección principal de su código HTML.
<enlace rel=”hoja de estilo” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css”>
<script src=”https://code. jquery.com/jquery-3.6.0.slim.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper. min.js” crossorigin=”anónimo”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js”> </script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js”></script>
El botón recibe una identificación única a la que se hace referencia en el código jQuery para iniciar la información sobre herramientas. Este código jQuery solo inicia la información sobre herramientas para que se muestre al pasar el mouse de la siguiente manera:
Sintaxis:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Ejemplo 1: el siguiente código demuestra el posicionamiento de la información sobre herramientas anterior mediante el atributo de ubicación de datos . La información sobre herramientas está asociada con un elemento de botón. A medida que se desplaza sobre el botón, la información sobre herramientas se muestra en la posición inferior predeterminada.
-
Información sobre herramientas Posición inferior
<div class="text-center"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" /> </div> -
Información sobre herramientas Posición superior
<div class="text-center"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top" /> </div>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"/>
<script src=
"https://code.jquery.com/jquery-3.6.0.slim.js">
</script>
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<p><b>Tooltip tutorial</b></p>
<button
type="button"
class="btn btn-secondary"
data-toggle="tooltip"
data-placement="top"
title="This is top tooltip">
Hover over me to see top tooltip
</button>
<br /><br />
<button
type="button"
class="btn btn-secondary"
data-toggle="tooltip"
data-placement="bottom"
title="This is bottom Tooltip">
Hover over me to see bottom tooltip
</button>
</body>
</html>
Producción:
Ejemplo: El siguiente código demuestra el posicionamiento de la información sobre herramientas a la derecha y a la izquierda del botón.
-
Posición de información sobre herramientas a la izquierda:
<div class="text-center"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left" /> </div> -
Posición de la información sobre herramientas a la derecha:
<div class="text-center"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right" /> </div>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"/>
<script src=
"https://code.jquery.com/jquery-3.6.0.slim.js">
</script>
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<style>
.btn {
margin: 10px;
}
</style>
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<p><b>Tooltip tutorial</b></p>
<button
type="button"
class="btn btn-secondary"
data-toggle="tooltip"
data-placement="right"
x-placement="left"
title="This is left Tooltip">
Hover over me to see Right tooltip
</button>
<button
type="button"
class="btn btn-secondary"
data-toggle="tooltip"
data-placement="left"
x-placement="right"
title="This is right Tooltip">
Hover over me to see Left tooltip
</button>
</body>
</html>
Producción:
Puede aprender todas las demás cosas sobre la información sobre herramientas siguiendo el artículo de información sobre herramientas de Bootstrap 4 .