En Bootstrap Framework, Tooltip es un complemento que muestra un pequeño cuadro emergente cuando el usuario pasa el puntero del mouse sobre un elemento. Por ejemplo, cuando un usuario señala un enlace o botones, etc., aparece una pequeña ventana emergente con una sugerencia o información sobre el elemento. Este complemento de información sobre herramientas generalmente se usa cuando queremos mostrar el propósito de cada componente en la página web, simplemente moviendo el puntero del mouse sobre el componente.
Para implementar la información sobre herramientas, debemos agregar el atributo data-toggle=”tooltip” a un elemento y el atributo de título se usa para mostrar el texto al pasar el mouse por encima. Debemos inicializar Tooltip para activar, Tooltips a través de JavaScript utilizando el método tooltip() que especifica la identificación, la clase o cualquier selector de CSS del elemento de destino en el código JavaScript. En este artículo, aprenderemos sobre la información sobre herramientas en Bootstrap junto con su configuración e implementación. Consulte Bootstrap 4 | Artículo de información sobre herramientas para más detalles.
Paso para configurar el complemento de información sobre herramientas de arranque:
Incluya Bootstrap y jQuery CDN en la etiqueta <head> –
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js” ></guión>
Agregar marcado de información sobre herramientas en el elemento HTML –
<a href="#" data-toggle="tooltip"
title="Some Information or Hint">
Hover over me
</a>
Agregue jQuery a la etiqueta <script> para activar la información sobre herramientas:
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Información sobre herramientas de posicionamiento (opcional) –
De forma predeterminada, el complemento de información sobre herramientas de arranque siempre aparecerá en la parte superior del elemento. Pero podemos usar un atributo de ubicación de datos para cambiar la posición del complemento de información sobre herramientas para que podamos colocar la información sobre herramientas en la parte superior, inferior, izquierda o derecha del elemento.
<a href="#" data-toggle="tooltip"
data-placement="top"
title="Tooltip on top">
Tooltip on top
</a>
<a href="#" data-toggle="tooltip"
data-placement="bottom"
title="Tooltip on bottom">
Tooltip on bottom
</a>
<a href="#" data-toggle="tooltip"
data-placement="left"
title="Tooltip on left">
Tooltip on left
</a>
<a href="#" data-toggle="tooltip"
data-placement="right"
title="Tooltip on right">
Tooltip on right
</a>
También podemos posicionar Tooltips a través de JavaScript:
<script>
$(document).ready(function () {
//.tooltip-**** is the class
// specified in the html element
$(".tooltip-top").tooltip({ placement: "top" });
$(".tooltip-right").tooltip({ placement: "right" });
$(".tooltip-bottom").tooltip({ placement: "bottom" });
$(".tooltip-left").tooltip({ placement: "left" });
});
</script>
En esta etapa, hemos configurado con éxito la información sobre herramientas para comenzar a trabajar en ella.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tooltip Example</title>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h5>Bootstrap Tooltip Example</h5>
<br />
<a href="#" data-toggle="mytooltip"
title="A Computer Science portal for geeks">
Hover me
</a>
</div>
<script>
// Add below code to trigger tooltip
$(document).ready(function () {
$('[data-toggle="mytooltip"]').tooltip();
});
</script>
</body>
</html>
Producción:
