El widget de información sobre herramientas en jQuery UI es diferente de la información sobre herramientas tradicional principalmente porque lo hace más tematizable y mucho más personalizable. Algunas de las personalizaciones disponibles son:
- El contenido adicional, como notas al pie, etc., también se puede mostrar recuperándolo a través de Ajax.
- Personalización de los campos para los campos de Advertencia y error.
- Personalice la posición, es decir, para centrar la información sobre herramientas por encima de los elementos.
De forma predeterminada, se utiliza una animación de desvanecimiento para mostrar la información sobre herramientas.
Sintaxis:
$( "#div_tooltip" ).tooltip({
});
Valores de atributos:
- contenido: este atributo representa el contenido de una información sobre herramientas. De forma predeterminada, su valor es una función que devuelve el atributo de título.
- disabled: este atributo, cuando se establece en true, desactiva la información sobre herramientas. Por defecto su valor es falso.
- ocultar: este atributo representa el efecto de animación al ocultar la información sobre herramientas. Por defecto su valor es verdadero.
- elementos: esta opción indica qué elementos pueden mostrar información sobre herramientas. Por defecto su valor es [título].
- posición: este atributo decide la posición de la información sobre herramientas con respecto al elemento de destino asociado. Por defecto, su valor es función que devuelve el atributo de título. Los valores posibles son: mi, en, de, colisión, usando, dentro.
- show: este atributo representa cómo animar la visualización de información sobre herramientas. Por defecto su valor es verdadero.
- tooltipClass: este atributo es una clase que se puede agregar al widget de información sobre herramientas para obtener información sobre herramientas, como advertencias o errores. Por defecto su valor es nulo.
- seguimiento: este atributo cuando se establece en verdadero, la información sobre herramientas sigue/rastrea el mouse. Por defecto su valor es falso.
La información sobre herramientas se puede agregar, lo que anulará la string principal escrita con el atributo de título. Esto nos da una ventaja ya que podemos cambiar la información sobre herramientas usando un script, es como si el mismo elemento pudiera mostrar diferentes strings de información sobre herramientas bajo diferentes requisitos. Probemos eso. Aquí hemos definido el título como «Bienvenido a geeksforgeeks», que se sobrescribe dentro del código javascript.
Ejemplo 1:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<div id=div_tooltip
title='Welcome to geeksforgeeks'>
Bring your Mouse here
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#div_tooltip").tooltip({});
})
</script>
</center>
</body>
</html>
Producción:
Sobrescribir el título en la información sobre herramientas: otra gran ventaja del widget de información sobre herramientas en jQuery UI es que el título se puede sobrescribir como se especifica al definir el elemento. Esto se puede hacer especificando el mensaje dentro de la opción de contenido dentro de nuestro código JavaScript.
Ejemplo 2:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=div_tooltip
title='Welcome to geeksforgeeks'>
Bring your Mouse here
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#div_tooltip").tooltip({
content: "This is my content"
});
})
</script>
</center>
</body>
</html>
Producción:
Deshabilitar información sobre herramientas: este atributo, cuando se establece en verdadero, deshabilita la información sobre herramientas. Por defecto su valor es falso.
Ejemplo 3:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=div_tooltip
title='Welcome to geeksforgeeks'>
Bring your Mouse here
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#div_tooltip").tooltip({
disabled: true
});
})
</script>
</center>
</body>
</html>
Producción:
Elementos: el atributo de elementos se utiliza para configurar un mensaje de elemento diferente para que se muestre como información sobre herramientas. En el siguiente ejemplo, se mantiene un cuadro de texto dentro de la etiqueta div. De forma predeterminada, el mensaje escrito dentro del cuadro de texto se mostrará como información sobre herramientas, pero configurando los elementos en la etiqueta div y mostrando el mensaje escrito dentro del atributo de título de la etiqueta div como información sobre herramientas.
Ejemplo 4:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=div_tooltip title='I am inside a Div tag'>
<input type=textbox
name=my_text
id=my_text
title='I am the input box'>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#my_text").tooltip({
items: 'div'
});
})
</script>
</center>
</body>
</html>
Producción:
Posición: este atributo se utiliza para mostrar la información sobre herramientas en cualquier posición relativa al elemento principal.
Los valores posibles son.
- my: Este es el cuadro de información sobre herramientas.
- en: el elemento para el que se muestra la información sobre herramientas.
También tenga en cuenta que:
- Toda alineación horizontal puede tomar tres posiciones: izquierda o derecha o centro.
- Toda alineación vertical puede adoptar tres posiciones: superior, inferior o central.
Revisa esta línea
position: { my: "left center", at: "right top" }
Aquí, la posición central del lado izquierdo de la información sobre herramientas ( my: «left center» ) se alineará con los elementos principales en la posición superior del lado derecho ( at: «right top» )
Ejemplo 5:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div align=center>
<input type=textbox
name=my_text
id=my_text
title=''>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#my_text").tooltip({
content: "I am the textbox",
position: {
my: "left center",
at: "right top"
}
});
})
</script>
</center>
</body>
</html>
Producción:
Información sobre herramientas Mostrar-Ocultar: Mostrar y ocultar son dos opciones independientes, pero podemos aprenderlas juntas. El atributo show se usa para agregar efectos para administrar la apariencia de la información sobre herramientas. Esta es la animación que se crea mientras se muestra la información sobre herramientas. El atributo ocultar se usa para agregar efectos para administrar la desaparición de la información sobre herramientas. Esta es la animación que se crea al ocultar la información sobre herramientas.
Para las opciones de mostrar y ocultar, use varios efectos en el siguiente ejemplo.
Ejemplo 6:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">Geeksforgeeks</h1>
<input type=textbox
name=my_text
id=my_text
title='I am the input box'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#my_text").tooltip({
show: {
effect: "slide",
duration: 400
},
hide: {
effect: "pulsate",
duration: 400
}
});
})
</script>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por mayeshmohapatra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA