Cambiar el contenido de la información sobre herramientas de Twitter Bootstrap al hacer clic

Tengo una información sobre herramientas en un elemento de anclaje, que envía una solicitud de AJAX al hacer clic. Este elemento tiene una información sobre herramientas (de Twitter Bootstrap). Quiero que el contenido de la información sobre herramientas cambie cuando la solicitud de AJAX vuelva a funcionar correctamente. ¿Cómo puedo manipular la información sobre herramientas después de la iniciación?

Acabo de encontrar esto hoy mientras leo el código fuente. Entonces $.tooltip(string) llama a cualquier función dentro de la clase Tooltip . Y si mira Tooltip.fixTitle , obtiene el atributo data-original-title y reemplaza el valor del título con él.

Entonces simplemente lo hacemos:

 $(element).tooltip('hide') .attr('data-original-title', newValue) .tooltip('fixTitle') .tooltip('show'); 

y, por supuesto, actualiza el título, que es el valor dentro de la información sobre herramientas.

Otra forma (vea el comentario de @lukmdo a continuación):

 $(element).attr('title', 'NEW_TITLE') .tooltip('fixTitle') .tooltip('show'); 

En Bootstrap 3 es suficiente llamar a elt.attr('data-original-title', "Foo") ya que los cambios en el atributo "data-original-title" ya activan cambios en la pantalla de información sobre herramientas.

puede actualizar el texto de información sobre herramientas sin llamar realmente a show / hide:

 $(myEl) .attr('title', newTitle) .tooltip('fixTitle') .tooltip('setContent') 

Aquí hay una buena solución si quiere cambiar el texto sin cerrarlo y volver a abrir la información sobre herramientas.

 $(element).attr('title', newTitle) .tooltip('fixTitle') .data('bs.tooltip') .$tip.find('.tooltip-inner') .text(newTitle) 

de esta forma, se reemplaza el texto sin cerrar la información sobre herramientas (no se cambia de posición, pero si está haciendo un cambio de una palabra, etc., debería estar bien). y cuando se desplaza hacia fuera + atrás en la información sobre herramientas, todavía se actualiza.

** esto es bootstrap 3, para 2 probablemente tenga que cambiar los nombres de datos / clase

Esto funciona si la información sobre herramientas se ha instanciado (posiblemente con javascript):

 $("#tooltip_id").data('tooltip').options.title="New_value!"; $("#tooltip_id").tooltip('hide').tooltip('show'); 

Para bootstrap 3.x

Esta parece la solución más limpia:

 $(element) .attr('data-original-title', 'New title').tooltip('show') 

Show se utiliza para actualizar el título de inmediato y no esperar a que la información sobre herramientas se oculte y se muestre de nuevo.

Simplemente puede cambiar el data-original-title usando el siguiente código:

 $(element).attr('data-original-title', newValue); 

Lo siguiente funcionó mejor para mí, básicamente eliminé cualquier información sobre herramientas existente y no me molesté en mostrar la nueva información sobre herramientas. Si se muestra una llamada en la información sobre herramientas como en otras respuestas, aparece incluso si el cursor no está sobre ella.

El motivo por el que recurrí a esta solución es porque las otras soluciones, al volver a utilizar la información sobre herramientas existente, ocasionaron algunos problemas extraños con la información sobre herramientas que a veces no se muestran al pasar el cursor sobre el elemento.

 function updateTooltip(element, tooltip) { if (element.data('tooltip') != null) { element.tooltip('hide'); element.removeData('tooltip'); } element.tooltip({ title: tooltip }); } 

Gracias, este código fue muy útil para mí, lo encontré efectivo en mis proyectos

$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');

Destruya cualquier información sobre herramientas preexistente para que podamos repoblar con nuevo contenido de información sobre herramientas

 $(element).tooltip("destroy"); $(element).tooltip({ title: message }); 

En bootstrap 4 solo uso $(el).tooltip('dispose'); luego recrear como normal. Por lo tanto, puede colocar el desecho antes de una función que crea una información sobre herramientas para asegurarse de que no se duplica.

Tener que verificar el estado y jugar con los valores parece menos amistoso.

para Bootstrap 4:

 $(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle"); 

Creo que Mehmet Duran está casi en lo cierto, pero hubo algunos problemas al usar múltiples clases con la misma información sobre herramientas y su ubicación. El siguiente código también evita la comprobación de errores js si hay alguna clase llamada “tooltip_class”. Espero que esto ayude.

 if (jQuery(".tooltip_class")[0]){ jQuery('.tooltip_class') .attr('title', 'New Title.') .attr('data-placement', 'right') .tooltip('fixTitle') .tooltip('hide'); } 

Puede configurar el contenido en la llamada emergente con una función

  $("#myelement").tooltip({ "title": function() { return "

"+$("#tooltipcontainer").html()+"

"; } });

No tiene que usar solo el título del elemento llamado.

Cambie el texto alterando el texto en el elemento directamente. (no actualiza la posición de la información sobre herramientas).

 $('.tooltip-inner', $element.next()).html(newHtml); $('.tooltip-inner', $element.next()).text(newText); 

Cambia el texto destruyendo la información sobre herramientas anterior, luego creando y mostrando una nueva. (Hace que el anterior se desvanezca y el nuevo se desvanezca)

 $element .tooltip('destroy') .tooltip({ // Repeat previous options. title: newText, }) .tooltip('show'); 

Estoy usando el método superior para animar el “Ahorro”. mensaje (usando &nbsp para que la información sobre herramientas no cambie de tamaño) y para cambiar el texto a “Hecho”. (más relleno) cuando la solicitud se completa.

 $element.tooltip({ placement: 'left', title: 'Saving...', trigger: 'manual', }).tooltip('show'); var parent = $element.parent(); var interval_id = setInterval(function(){ var text = $('.tooltip-inner', parent).html(); switch(text) { case 'Saving.  ': text = 'Saving.. '; break; case 'Saving.. ': text = 'Saving...'; break; case 'Saving...': text = 'Saving.  '; break; } $('.tooltip-inner', parent).html(text); }, 250); send_request( function(){ // When the request is complete clearInterval(interval_id); $('.tooltip-inner', parent).html('Done.    '); setTimeout(function() { $element.tooltip('hide'); }, 1500 /* Show "Done." for a bit */); }); 

Puede usar este código para ocultar la información sobre herramientas, cambiar su título y volver a mostrar la información sobre herramientas cuando la solicitud ajax vuelva a funcionar correctamente.

 $(element).tooltip('hide'); $(element).attr('title','this is new title'); $(element).tooltip('fixTitle'); setTimeout(function() { $(element).tooltip('show');}, 500); 

No pude conseguir que ninguna de las respuestas funcionara, aquí hay una solución alternativa:

 $('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle); 

Esto funcionó para mí: (bootstrap 3.3.6; jquery = 1.11.3)

   

El atributo data-html="true" permite usar html en el título de la información sobre herramientas.

Con el objeto Tooltip Boostrap:

 $(element).attr('data-original-title', 'New value'); $(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value'); 

Estoy usando esta forma fácil de salir:

 $(document).ready(function() { $("#btn").prop('title', 'Click to copy your shorturl'); }); function myFunction(){ $(btn).tooltip('hide'); $(btn).attr('data-original-title', 'Test'); $(btn).tooltip('show'); }); 
 $(this).attr('data-original-title', 'click here to publish') .tooltip('fixTitle') .tooltip('show'); 

Es útil si necesita cambiar el texto de la información sobre herramientas después de que se haya inicializado con attr ‘data-original-title’.