jquery - span - Cambiar el contenido de Twitter Bootstrap Tooltip al hacer clic

tooltip label bootstrap

Question

Tengo una información sobre herramientas en un elemento de anclaje, que envía una solicitud 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 se devuelva correctamente. ¿Cómo puedo manipular la información sobre herramientas después de la iniciación?

Answer 1

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>

Answer 2

Aquí tiene 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 reemplazado sin cerrar la información sobre herramientas (no se vuelve a colocar, pero si está haciendo un cambio de una palabra, etc., debería estar bien). y cuando desplaza el mouse sobre + tooltip, todavía se actualiza.

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

Answer 3

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 antigua, luego cree y muestre 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 de arriba para animar el "Guardar". 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 complete.

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

Answer 4

Con el objeto Tooltip Boostrap:

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

Answer 5

Creo que Mehmet Duran está casi en lo cierto, 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 los errores de js que verifican 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'');

    }

Answer 6

Destruye cualquier información sobre herramientas preexistente para que podamos repoblar con el nuevo contenido de información sobre herramientas.

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

Answer 7

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 visualización de información sobre herramientas.

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

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

Answer 8

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

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

Answer 9

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.

Answer 10

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

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

Answer 11

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

Answer 12

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

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

Answer 13

Lo siguiente funcionó mejor para mí, básicamente, estoy eliminando cualquier información sobre herramientas existente y sin molestarme en mostrar la nueva información sobre herramientas. Si la llamada se muestra en la información sobre herramientas como en otras respuestas, aparece incluso si el cursor no se encuentra sobre ella.

La razón por la que opté por esta solución es que las otras soluciones, reutilizando la información sobre herramientas existente, llevaron a algunos problemas extraños, ya que a veces la información de la herramienta 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
    });
}

Answer 14

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

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

Answer 15

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 uno (información sobre herramientas o ventana emergente) al mismo tiempo, y el problema de abrir 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>

Answer 16

Para bootstrap 3.x

Esto parece la solución más limpia:

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

Mostrar 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.

Answer 17

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

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

No es necesario utilizar solo el título del elemento llamado.

Answer 18

Solo puedes cambiar el data-original-title usando el siguiente código:

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

Answer 19

para Bootstrap 4:

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

Answer 20

puede actualizar el texto de la información sobre herramientas sin llamar realmente a mostrar / ocultar:

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

Answer 21

puede usar este código para ocultar la información sobre herramientas, cambie su título y vuelva a mostrarla cuando la solicitud ajax se devuelva correctamente.

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

Answer 22

Acabo de encontrar esto hoy mientras leía el código fuente. Así que $.tooltip(string) llama a cualquier función dentro de la clase Tooltip . Y si nos fijamos en Tooltip.fixTitle , Tooltip.fixTitle el atributo data-original-title y reemplaza el valor del título con este.

Así que simplemente 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 (ver @lukmdo comentar abajo):

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

Answer 23

$(this).attr(''data-original-title'', ''click here to publish'')
       .tooltip(''fixTitle'')
       .tooltip(''show'');

Útil si necesita cambiar el texto de una información sobre herramientas después de que se haya inicializado con el título ''datos-original-título''.