ejemplos - ¿Cómo actualizo el contenido en Jquery UI Tooltip en tiempo real?
tooltip.js example (6)
¿Por qué no hacerlo de esta manera?
HTML:
<input class="input-change" id="input1" type="text" title="Test1" value="Input #1">
<input class="input-change" id="input2" type="text" title="Test2" value="Input #2">
<input class="input-change" id="input3" type="text" title="Test3" value="Input #3">
jQuery:
// Every time a key is pressed (for the sake of example)
$(function(){
// Initialize tooltip
$(''.input-change'').tooltip();
// Every time a key is pressed (again, for the sake of example)
$(".input-change").keyup(function(){
// Get the actual value of the input that has changed (again, for the sake of example)
var inputValue = $(this).val();
// Get the id of the input that has changed
var idInputChanged = "#" + $(this).attr(''aria-describedby'');
// Go directly to the <div> inside the tooltip and change the text
$(idInputChanged + '' div'').html(''Text changed in real time without closing tooltip!:<br />'' + inputValue);
});
})
Ejemplo de JSFiddle:
Tengo un elemento que cuando se coloca sobre él, muestra el precio del artículo (en un juego). Estoy usando la información sobre herramientas de la interfaz de usuario de jQuery para potenciar la visualización de la información sobre cada elemento. Cuando se hace clic en el elemento, jQuery captura el clic, utiliza una solicitud $ .get () para procesar la compra y puede devolver información específica relacionada con el elemento a través de JSON y la función parseJSON de jQuery.
Sin embargo, los precios de cada artículo cambian con cada compra. Es una especie de forma de inflación. No puedo averiguar cómo acceder al contenido de la información sobre herramientas de la interfaz de usuario de jQuery para cambiar su contenido, de modo que mientras aún se muestra o incluso cuando no se muestra, cambie el valor de su contenido para reflejar los nuevos precios.
¿Qué necesito hacer para cambiar ese contenido en tiempo real?
Aquí hay otra solución que me funciona bien: solo agregue esto a $(function(){ // code here }); :
$(document).tooltip({
content: function()
{
var $this = $(this);
return $this.attr(''title'');
}
});
La ventaja de esto es que si su atributo de title cambia durante el tiempo de ejecución, la información sobre herramientas siempre muestra la versión más actual, por lo que se "actualiza" a sí misma.
Técnicamente, no probé si esto funciona con attr(''title'') (supongo que lo hará).
Mi versión personal es diferente, ya que necesito más que texto sin formato para mostrar en la información sobre herramientas, es decir, el código HTML. Así que aquí está el código que estoy usando para mi proyecto actual:
<div class="title" data-note="This is my tooltip text<br>with line break"></div>
y
$(document).tooltip({
items: ".title",
content: function()
{
var $this = $(this);
if ($this.data(''note'') != '''')
{
return unescape($this.data(''note''));
}
else
{
return false;
}
}
});
Tenga en cuenta los items que me permiten personalizar los elementos para activar la información sobre herramientas.
Me encontré con esto, y las otras respuestas aquí no cubren realmente el problema sobre el que preguntó el OP (el mismo problema que estaba teniendo): cómo obtener la información sobre herramientas jQueryUI para modificar su contenido al cambiar el atributo "título" de un elemento que tiene una información sobre herramientas. Recibí una entrada sin atributo de "título", que estaba siendo validada a través de AJAX contra el servidor, y si no era válida, estaba cambiando la clase CSS y agregando un "título" para indicar el error, y contando con la información sobre herramientas de la interfaz de usuario de jQuery para "solo trabajo".
Había configurado información sobre herramientas de acuerdo con la documentación de JQUI, utilizando $(document).tooltip() para obtener el comportamiento delegado predeterminado (que muestra una información sobre herramientas para cada elemento habilitado con un atributo de "título"). Luego, cuando mi validación de ajax usó $("#inputid").attr("title", "validation error"); , todo fue encantador, cualquiera de mis mensajes de error apareció como información sobre herramientas cuando mi información fue activada.
Sin embargo, eliminando el atributo "título" después de que el usuario corrigió el valor de entrada, llamando a $("#inputid").removeAttr("title"); resultó ser problemático, ya que el atributo "título" volvería a aparecer misteriosamente, junto con la información sobre herramientas.
Después de una pequeña investigación, descubrí que se debía a que el widget de información sobre herramientas almacena el atributo "título" en otro lugar (usando .data("ui-tooltip-content"...) ) para deshabilitar la información sobre herramientas real del navegador, y luego restaura it (por lo que el atributo "título" estaba volviendo a aparecer misteriosamente.
Por lo tanto, la respuesta "correcta" (o quizás la más simple) a la pregunta del OP es desactivar temporalmente la funcionalidad de información sobre herramientas de jQueryUI antes de cambiar (o eliminar) el atributo "título", y luego volver a habilitarlo para que vuelva a examinar el atributo. contenido y hacer lo correcto. Así que algo como esto:
// first, disable tooltips
$(document).tooltip("disable");
// Make your change to the element''s title
$("#inputid").attr("title", "new message");
or ...
$("#inputid").removeAttr("title");
// re-enable tooltips
$(document).tooltip("enable");
¡Eso es todo al respecto! El problema con el uso de .tooltip("option", "content", "some text") como se .tooltip("option", "content", "some text") anteriormente, es que necesita definir manualmente cada una de las informaciones sobre herramientas que desea mostrar; ciertamente hay mucha codificación innecesaria, si lo desea. es tener la información sobre herramientas "solo funciona" con el contenido de la página.
Mi caso de uso consistió en establecer un mensaje de éxito / falla cuando se hizo clic en el elemento de información sobre herramientas (para copiar una url en el portapapeles), y luego restablecerlo cuando el elemento se perdió, así el mensaje original se mostraría cuando se colocara el siguiente elemento.
Noté que al hacer doble clic, es decir, al hacer clic mientras la información sobre herramientas aún está abierta, el nuevo mensaje persistió cuando el elemento se perdió y se recuperó. Así lo resolví. Agradecería cualquier sugerencia de mejora.
var msg = ''New message'';
// Cache $target
var $target = $(event.target);
// First close tooltip, which should be open on hover
$target.tooltip(''close'');
// Get the original message
var oldMsg = $target.tooltip("option", "content");
// Set the tool tip to the success/fail message
$target.tooltip("option", "content", msg);
// Open the tooltip with the new message
$target.tooltip(''open'');
// For some reason, the tooltip doesn''t close automatically
// unless the hide option is reset
$target.tooltip("option", "hide", {effect: "fade", duration: 1000});
// Set message back to original after close.
$target.on("tooltipclose", function (event, ui) {
$(this).tooltip("option", "content", oldMsg);
});
Mi primera respuesta fue incorrecta, lo siento por eso.
<div id=''mybody''>
<p title=''Some tooltip''>paragraph</p>
</div>
javascript:
function reloadToolTip(text){
$(''#mybody p'').tooltip({contents:text});
}
Puede recuperar la información sobre herramientas y cambiar los contenidos. Esto cambiará la información sobre herramientas, pero no hasta que se recupere.
Editar:
Creo que encontré algo que funcionará. Simplemente cierre y vuelva a abrir la información sobre herramientas. La información sobre herramientas contendrá el nuevo texto.
function reloadToolTip(text){
$(''#mybody p'').tooltip({contents:text}).tooltip(''close'').tooltip(''open'');
}