En este artículo, aprenderemos cómo implementar la función de información sobre herramientas utilizando el complemento jQuery jTippy Tooltip .
Nota: descargue el complemento jQuery jTippy en la carpeta de trabajo e incluya los archivos necesarios en la sección principal de su código HTML.
<enlace href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”
rel=”hoja de estilo” type=”text/css”/><enlace href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”
rel=”stylesheet” type=”text/css”/><enlace href=”https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css”
rel=”stylesheet” type=”text/css”/><enlace href=”jTippy.css” rel=”hoja de estilo” type=”text/css”/>
<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>
<script src=”jTippy.min.js”></script>
Ejemplo 1: El siguiente ejemplo demuestra la funcionalidad básica del complemento jTippy Tooltip .
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>jQuery jTippy Tooltip Plugin</title>
<meta name="description"
content="jQuery tooltip plugin" />
<meta content="width=800, initial-scale=1"
name="viewport" />
<link
rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/
css/font-awesome.min.css"/>
<link
rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css"/>
<link rel="stylesheet" href="jTippy.css" />
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src="jTippy.min.js"></script>
<style>
body,
html {
height: 60%;
width: 60%;
margin: 0px;
font-family: Arial;
}
</style>
</head>
<body class="body text-center">
<h2 style="color: green;">GeeksForGeeks</h2>
<b>jQuery jTippy tooltip plugin </b>
<p></p>
<a href="#" data-toggle="tooltip" title="This is tooltip">
This is a dummy link to show tooltip.
</a>
<script>
$(function () {
$('[data-toggle="tooltip"]').jTippy();
});
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el uso de varios ajustes de opciones y funciones de activación de eventos. A continuación, solo se usan algunos, el desarrollador puede explorarlos y usarlos según las necesidades de la aplicación. Cuando se muestra la información sobre herramientas a los usuarios, se activa el evento on(‘jt-show’) que muestra el mensaje en el div HTML con id «showDivID» . El mensaje div se oculta una vez que se activa el evento on(‘jt-hide’) .
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>jQuery jTippy Tooltip Plugin</title>
<meta name="description"
content="jQuery tooltip plugin" />
<meta content="width=800, initial-scale=1"
name="viewport" />
<link
rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"/>
<link
rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link
rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css"/>
<link rel="stylesheet" href="jTippy.css" />
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src="jTippy.min.js"></script>
<style>
body,
html {
height: 100%;
margin: 0px;
font-family: Arial;
}
</style>
</head>
<body class="body text-center">
<h2 style="color: green;">GeeksForGeeks</h2>
<b>jQuery jTippy tooltip plugin </b>
<p></p>
<a
href="#"
data-toggle="tooltip"
title="A Tooltip is used to provide interactive
textual hints to the user about the element
when the mouse pointer moves over. Tooltip is
quite useful for displaying the description of
different elements in the webpage.">
Hover or Focus to see tooltip
</a>
<div id="showDivID"></div>
<!-- Option settings and events trigger-->
<script>
$(function () {
$('[data-toggle="tooltip"]')
.jTippy({
title: "Trying out jTippy tooltips",
// The tooltip is displayed on mouse
// over and focus event
trigger: "hoverfocus",
size: "medium",
position: "auto",
backdrop: false,
theme: "black",
singleton: true,
close_on_outside_click: true,
})
.on("jt-show", function (e, tooltip, hide) {
// triggered on show tooltip ;
$("#showDivID").html("Show tooltip event is triggered");
})
.on("jt-hide", function (e) {
//triggered on tooltip hide
$("#showDivID").hide();
});
});
</script>
</body>
</html>
Producción:
Salida que muestra disparadores de eventos:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA