Mostrar un mensaje de tooltip al pasar el mouse usando jQuery
- Tooltip de jQuery-UI
-
Use el método
tooltip()con el parámetrooptionspara mostrar un mensaje de tooltip al pasar el mouse usando jQuery -
Use el método
tooltip()con el parámetroactionspara mostrar un mensaje de tooltip al pasar el mouse usando jQuery
La tooltip es un widget de jQuery-UI que se utiliza para agregar nuevos temas y permitir la personalización. Este tutorial demuestra cómo usar la tooltip de jQuery-UI.
Tooltip de jQuery-UI
La tooltip de jQuery se utiliza para permitir la personalización y crear nuevos temas. La tooltip se adjunta a cualquier elemento; para mostrarlos, les agregamos un atributo de título, que se utilizará como tooltip.
Cuando pasamos el cursor sobre ese elemento, la tooltip con el atributo title será visible. jQuery-UI proporciona un método tooltip(), que puede agregar tooltip a cualquier elemento.
El método tooltip() proporciona una animación de fundido, de forma predeterminada, al mostrar y ocultar la tooltip.
La sintaxis de este método es:
Method 1:
$(selector, context).tooltip (options)
Method 2:
$(selector, context).tooltip ("action", [params])
Hay dos formas de utilizar el método tooltip().
Use el método tooltip() con el parámetro options para mostrar un mensaje de tooltip al pasar el mouse usando jQuery
El primer método con el parámetro options se utiliza para especificar el comportamiento y la apariencia de la tooltip. El parámetro opciones se puede insertar varias veces y tiene varios tipos.
La siguiente tabla muestra el tipo de opciones:
| Opción | Descripción |
|---|---|
content |
Esta opción representa el contenido de la tooltip con el valor predeterminado de la función, que devuelve el atributo title. |
disabled |
Esta opción se utiliza para deshabilitar la tooltip con valores verdaderos o falsos. |
hide |
Esta opción representa la animación de un tooltip al ocultarlo. Los valores son verdadero o falso. |
show |
Esta opción representa la animación de la tooltip mientras se muestra. Los valores son verdadero o falso. |
track |
Esta opción rastrea el mouse cuando se trabaja con tooltip. El valor predeterminado es falso. |
items |
Esta opción se utiliza para elegir qué elemento mostrará la tooltip. El valor por defecto es título |
position |
Esta opción se utiliza para decidir la posición de la tooltip. El valor predeterminado es la función que devuelve el atributo de título. |
tooltip class |
Esta opción representa una clase que se puede agregar a la tooltip. Puede representar la advertencia o errores; el valor predeterminado de esta opción es nulo. |
Primero, probemos un ejemplo simple de tooltip() sin parámetros. Asegúrese de importar jQuery-UI para que el método tooltip() pueda funcionar.
Ver ejemplo:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery Tooltip</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script>
$(function() {
$("#Demotooltip1").tooltip();
$("#Demotooltip2").tooltip();
});
</script>
</head>
<body>
Type Something: <input id = "Demotooltip1" title = "Please Type Something">
<p><label id = "Demotooltip2" title = "This is tooltip Demo"> Hover Here to See Tooltip </label></p>
</body>
</html>
El código anterior mostrará la tooltip en la entrada de texto y la etiqueta. Ver salida:
Ahora, probemos un ejemplo con las opciones content, disabled y track:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery Tooltip </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#Demotooltip1" ).tooltip({
content: "Tooltip from Content",
track:true
}),
$( "#Demotooltip2" ).tooltip({
disabled: true
});
});
</script>
</head>
<body>
Type Something: <input id = "Demotooltip1" title = "Original">
<br><br>
Disabled Tooltip: <input id = "Demotooltip2" title = "Demotooltip">
</body>
</html>
El código anterior demuestra el uso de las opciones content, track y disabled. Ver salida:
Probemos un ejemplo más con la opción position. Ver ejemplo:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery Tooltip</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
body {
margin-top: 50px;
}
.ui-tooltip-content::after, .ui-tooltip-content::before {
position: absolute;
content: "";
display: block;
left: 100px;
border-style: solid;
}
.ui-tooltip-content::before {
bottom: -5px;
border-width: 5px 5px 0;
border-color: #AAA transparent;
}
.ui-tooltip-content::after {
bottom: -7px;
border-width: 10px 10px 0;
border-color: white transparent;
}
</style>
<script>
$(function() {
$( "#Demotooltip" ).tooltip({
position: {
my: "center bottom",
at: "center top-10",
collision: "none"
}
});
});
</script>
</head>
<body>
Type Something: <input id = "Demotooltip" title = "Please Type Something.">
</body>
</html>
El código anterior muestra la demostración de la opción position, que agrega una sugerencia a la tooltip. Ver salida:
Del mismo modo, se pueden utilizar otras opciones para el propósito descrito en la tabla anterior. Ahora, veamos el método 2.
Use el método tooltip() con el parámetro actions para mostrar un mensaje de tooltip al pasar el mouse usando jQuery
El método $ (selector, context).tooltip ("action", [params]) realizará las acciones en los elementos, por ejemplo, deshabilitando la tooltip. La action representa una cadena en el primer argumento, y los params se proporcionarán en función de las acciones dadas.
Existen múltiples tipos de acciones, que se detallan a continuación en la tabla:
| Acción | Descripción |
|---|---|
close |
Esta acción se utiliza para cerrar la tooltip. No tiene argumentos. |
destroy |
Esta acción eliminará la tooltip por completo. No tiene argumentos. |
disable |
Esta acción desactivará la tooltip. No tiene argumentos. |
enable |
Esta acción activará la tooltip. No tiene argumentos. |
open |
Esta acción abrirá la tooltip mediante programación. Sin argumentos. |
option() |
Esta acción obtendrá los pares clave-valor que representan el hash de la opción de tooltip actual. |
option(Options) |
Esta acción se utiliza para establecer las opciones para la tooltip. |
option(OptionName) |
Esta acción es para obtener el valor de OptionName. Ningún otro argumento. |
option(OptionName, value) |
Esta acción establecerá el valor de OptionName según el valor dado. |
widget |
Esta acción devolverá un objeto jQuery que contiene el elemento original. Sin argumentos. |
Probemos un ejemplo simple para la acción open y close, que mantendrá abierta la tooltip presionando el botón y cerrándola con otra presión de botón. Ver ejemplo:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery Tooltip</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$("#Demotooltip").tooltip({
//the 'of' keyword will be used to link the tooltip to the specified input
position: { of: '#DemoInput', my: 'left center', at: 'left center' },
}),
$('#DemoButton1').click(function () {
$('#Demotooltip').tooltip("open");
});
$('#DemoButton2').click(function () {
$('#Demotooltip').tooltip("close");
});
});
</script>
</head>
<body >
<label id = "Demotooltip" title = "Open and Close"></label>
<input id = "DemoInput" type = "text" size = "20" />
<input id = "DemoButton1" type = "submit" value = "Click to Show" />
<input id = "DemoButton2" type = "submit" value = "Click to Hide" />
</body>
</html>
El código anterior abrirá y cerrará la tooltip al hacer clic en el botón. Ver salida:
Ahora, probemos un ejemplo para la acción widget. El método widget se usa para obtener la instancia de jQuery-UI.
Ver ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href= "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src= "https://code.jquery.com/jquery-1.10.2.js"> </script>
<script src= "https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
<script>
$(function () {
$("#Demo2").tooltip({
track: true,
});
$("#Demo1").click(function () {
var a = $("#Demo2").tooltip("widget");
console.log(a);
});
});
</script>
</head>
<body>
<h1 style="color: lightblue">DELFTSTACK</h1>
<input id="Demo1" type="submit" name="delftstack" value="click" />
<span id="Demo2" title="delftstack"> Click Me</span>
</body>
</html>
El código anterior utilizará el método widget para obtener la instancia de jQuery-UI. Ver salida:
Del mismo modo, las otras acciones también se pueden utilizar para el propósito descrito en la tabla.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook