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

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

Entonces simplemente hacemos:

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

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

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

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

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

ACTUALIZACIÓN: puede agregar .tooltip ('show') para mostrar los cambios de inmediato, no necesita desplazar el mouse y pasar el mouse sobre el objetivo para ver el cambio en el título

elt.attr('data-original-title', "Foo").tooltip('show');

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

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

Heres una buena solución si desea cambiar el texto sin cerrar 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 manera, el texto se reemplaza sin cerrar la información sobre herramientas (no se reposiciona, pero si está haciendo un cambio de una palabra, etc., debería estar bien). y cuando coloca el cursor sobre + información sobre herramientas, todavía se actualiza.

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

para Bootstrap 4:

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

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

Esto parece la solución más limpia:

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

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

Aquí hay una actualización para Bootstrap 4 :

var title = "Foo";
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');

Pero la mejor manera es hacer esto:

var title = "Foo";
elt.attr('title', title);
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');

o en línea:

var title = "Foo";
elt.attr('title', title).attr('data-original-title', title).tooltip('update').tooltip('show');

Desde el lado de UX, solo ve que el texto se cambia sin efectos de desvanecimiento u ocultar / mostrar y no hay necesidad de hacerlo _fixTitle.

Puede cambiar el data-original-titleuso del siguiente código:

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

Bootstrap 4

$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')

https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose

$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
  $('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);

#topic_1 {
  border: 1px solid red;
  margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<div id="topic_1">Topic 1</div>

Lo siguiente funcionó mejor para mí, básicamente estoy desechando cualquier información sobre herramientas existente y sin molestarme en mostrar la nueva información sobre herramientas. Si se llama a show en la información sobre herramientas como en otras respuestas, aparece incluso si el cursor no se encuentra sobre él.

La razón por la que elegí esta solución es que las otras soluciones, al reutilizar la información sobre herramientas existente, condujeron a algunos problemas extraños con la información sobre herramientas que a veces no se muestra 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
    });
}

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

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

Puede establecer contenido en la llamada de información sobre herramientas con una función

        $("#myelement").tooltip({
            "title": function() {
                return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
            }
        });

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

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
});

No pude obtener ninguna de las respuestas funcionando, aquí hay una solución:

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

Creo que Mehmet Duran tiene casi razón, pero hubo algunos problemas al usar varias clases con la misma información sobre herramientas y su ubicación. El siguiente código también evita errores de js que comprueban 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');

    }

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

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

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

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

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

$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 */);
});

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

<a id="alertTooltip" href="#" data-html="true" class="tooltip" data-toggle="tooltip" title="Tooltip message"></a>

<script>
  $('#alertTooltip').attr('title', "Tooltip new <br /> message").tooltip('fixTitle');
</script>

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

Con el objeto de información sobre herramientas Boostrap:

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

Para BS4 (y BS3 con cambios menores) ... después de horas de búsqueda y pruebas, se me ocurrió la solución más confiable para este problema e incluso resuelve el problema de abrir más de una (información sobre herramientas o popover) al mismo tiempo, y el problema de abrirse automáticamente después de perder el foco, etc.

$('[data-toggle="tooltip"]').tooltip({
  trigger: 'hover'
}).on('shown.bs.tooltip', function() {
  var link = $(this);
  var data = '';
  data += '<ul style="list-style-type:none;margin:0;padding:0;text-align:left;font-size:12px">';
  data += '	<li>Sherif Salah</li>';
  data += '	<li>Muhammad Salah</li>';
  data += '	<li>and a gazillion more...</li>';
  data += '</ul>';
  link.attr('data-original-title', data);
  setTimeout(function() {
    if (link.is(':hover')) {
      link.tooltip("dispose").tooltip("show");
    }
  }, 1000);
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="card">
    <div class="card-body text-center">
      <a href="JavaScript:void(0);" class="btn btn-sm btn-link" data-toggle="tooltip" data-placement="top" data-html="true" title="Loading...">gazillion</a>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

Solo probé esto en bootstrap 4 y sin llamar a .show ()

el.tooltip('hide').attr('data-original-title', 'message');

puede usar este código para ocultar la información sobre herramientas, cambiar su título y mostrar la información sobre herramientas nuevamente, cuando la solicitud ajax regrese con éxito.

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

Estoy usando esta salida fácil:

$(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'.