jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante jQuery, CSS y HTML. jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. El widget de información sobre herramientas de jQuery UI nos ayuda a agregar nuevos temas y permite la personalización. En este artículo, veremos cómo usar la opción ocultar en la información sobre herramientas de jQuery UI. La opción ocultar se usa para agregar el efecto de animación mientras se oculta en la información sobre herramientas. De forma predeterminada, el valor es Verdadero.
Sintaxis:
$( ".selector" ).tooltips(
{ hide : true }
);
Parámetros:
- Booleano: si se establece en falso, no hay efecto de ocultación.
- Número: el tiempo (ms) después del cual se ocultará la información sobre herramientas.
- Cuerda:
- como
Acercarse:
- Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel=”hoja de estilo”>
<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>
Ejemplo 1: El siguiente ejemplo muestra la opción ocultar con tipo booleano para la información sobre herramientas.
HTML
<!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>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery UI | Tooltip hide Boolean option
</h3>
</head>
<body>
<p id="p1">
<a href="#" title="This is a tooltip">Tooltips</a>
GeeksforGeeks is a computer science portal</p>
<script>
$(document).ready(function() {
$("#p1").tooltip({
hide: { true }
});
});
</script>
</body>
</html>
Producción:
Ocultar información sobre herramientas
Al hacer clic en el enlace Información sobre herramientas, obtenemos la siguiente información sobre herramientas como resultado.
This is a tooltip
Ejemplo 2: El siguiente ejemplo demuestra la ocultación de la información sobre herramientas con el efecto de animación de explosión con 400 ms de tiempo. Aquí se muestra el uso de la opción explotar como string y 400 ms como número .
HTML
<!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>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery UI | Tooltip hide option
</h3>
<script>
$(function () {
$("#gfg1").tooltip({
hide: { effect: "explode", duration: 400 }
});
$("#gfg1").tooltip();
$("#gfg2").tooltip();
});
</script>
</head>
<body>
<label for="name">Name:</label>
<input id="gfg1" title="GeeksforGeeks">
<p><a id="gfg2" href="" title="GeeksforGeeks">
Click here!
</a></p>
</body>
</html>
Producción:
Ejemplo 3: El siguiente ejemplo muestra la animación oculta con la opción slideUp dentro de 200 ms de tiempo.
HTML
<!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>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQuery UI | Tooltip hide SlideUp option
</h3>
<script>
$(function () {
$("#gfg1").tooltip({
hide: { effect: "slideUp", duration: 200 }
});
$("#gfg1").tooltip();
$("#gfg2").tooltip();
});
</script>
</head>
<body>
<label for="name">Name:</label>
<input id="gfg1" title="GeeksforGeeks">
<p><a id="gfg2" href="" title="GeeksforGeeks">
Click here!
</a></p>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/category/widgets/