Alterar o conteúdo da dica de ferramenta do Twitter Bootstrap ao clicar


224

Eu tenho uma dica de ferramenta em um elemento âncora, que envia uma solicitação AJAX ao clicar. Este elemento possui uma dica de ferramenta (no Twitter Bootstrap). Quero que o conteúdo da dica de ferramenta seja alterado quando a solicitação AJAX retornar com êxito. Como posso manipular a dica de ferramenta após o início?

Respostas:


411

Achei isso hoje enquanto lia o código fonte. Então $.tooltip(string)chama qualquer função dentro da Tooltipclasse. E se você olhar Tooltip.fixTitle, ele busca o data-original-titleatributo e substitui o valor do título por ele.

Então, simplesmente fazemos:

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

e, com certeza, atualiza o título, que é o valor dentro da dica de ferramenta.

Outra maneira (veja o comentário do @lukmdo abaixo):

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

5
Obrigado! Isso ficou confuso por uma hora.
galho

160
Ou ainda mais curtos (mais suave)$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
lukmdo

5
Você também pode alterar o título por meio da propriedade data ('tooltip'). Options, consulte stackoverflow.com/questions/10181847/…
James McMahon

4
Não foi possível encontrar a documentação em 'fixTitle', então acho que não é uma boa ideia usar isso !? ...
user2846569

16
Na verdade, isso não funcionou para mim, a dica mudou os valores e desapareceu rapidamente. $(element).attr('data-original-title', newValue).tooltip('show');foi a solução de trabalho mais simples para mim.
Gabe O'Leary

98

No Bootstrap 3, é suficiente chamar, elt.attr('data-original-title', "Foo")pois as alterações no "data-original-title"atributo já acionam alterações na exibição da dica de ferramenta.

ATUALIZAÇÃO: você pode adicionar .tooltip ('show') para mostrar as alterações imediatamente, não precisa passar o mouse e o alvo para passar o mouse para ver a alteração no título

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

5
Resposta limpa, por que não há ups: <
ays0110

3
Ele não aplica alterações imediatamente, você precisa passar o mouse e o alvo para passar o
mouse

9
Esta é realmente a melhor resposta e você pode adicionar .tooltip('show');para obtê-lo para show após a atualização
Jared

Esta é a única solução (dentre muitas tentadas) que parecia funcionar (bs3). Boa solução, com certeza!
precisa saber é

3
Esta solução é melhor do que todos os outros
Ayyaz Zafar

14

você pode atualizar o texto da dica de ferramenta sem realmente chamar show / hide:

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

3
Isso, .tooltip('show')no final da cadeia, funcionou para mim.
Markau

1
sim, setContente showfaz o truque! você pode alterar data-original-titlediretamente em vez de usarfixTitle
brauliobo

Testado no Bootstrap v2.3.1
Ricardo

13

aqui está uma boa solução se você deseja alterar o texto sem fechar e reabrir a dica de ferramenta.

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

dessa maneira, o texto é substituído sem fechar a dica de ferramenta (não reposiciona, mas se você estiver fazendo uma alteração de uma palavra, etc, tudo ficará bem). e quando você passa o mouse + volta na dica de ferramenta, ela ainda é atualizada.

** este é o bootstrap 3, para 2 você provavelmente precisará alterar os nomes de dados / classe


5
Diz $tipnão é um atributo de$(element)
Augustin Riedinger 20/01

Fiz isso:$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);
Augustin Riedinger

Estou atualizando uma dica de ferramenta em um elemento vizinho ao digitar em um campo de texto, e a dica de ferramenta está desaparecendo para mim com esse código quando pressiono uma tecla.
tremby

Obrigado por isso. O único problema com esta solução é que ela parece atrapalhar a posição da dica de ferramenta após a alteração do texto.
Wojciech Zylinski

13

para o Bootstrap 4:

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

3
Isso usa API não documentada. Cuidado.
Chloe

9

Isso funciona se a dica de ferramenta foi instanciada (possivelmente com javascript):

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

7
Com inicialização 3, torna-se$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';
ajbeaven

Ei relacional, você poderia alterar sua resposta para refletir as correções dos comentários? Obrigado.
thouliha

7

Para bootstrap 3.x

Parece a solução mais limpa:

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

Show é usado para atualizar o título imediatamente e não esperar que a dica seja ocultada e mostrada novamente.


7

Aqui está a atualização para o Bootstrap 4 :

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

Mas a melhor maneira é fazer assim:

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

ou em linha:

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

Do lado do UX, você apenas vê que o texto é alterado sem efeitos de desbotamento ou ocultar / mostrar e não há necessidade de _fixTitle.


6

Você pode simplesmente mudar data-original-titleusando o seguinte código:

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

6

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>


4

O seguinte funcionou melhor para mim, basicamente estou descartando qualquer dica de ferramenta existente e não me incomodando em mostrar a nova dica. Se chamar show na dica de ferramenta como em outras respostas, ele será exibido mesmo que o cursor não esteja pairando acima dela.

A razão pela qual optei por esta solução é que as outras soluções, reutilizando a dica de ferramenta existente, levaram a alguns problemas estranhos com a dica de ferramenta que às vezes não apareciam ao passar o cursor sobre o elemento.

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

1
Melhor resposta para essa pergunta.
Daniel Miliński

@ DanielMiliński Obrigado :)
aknuds1

1
Se você estiver usando boostrap3 você precisa usar data('bs.tooltip'), em vez dedata('tooltip')
Nigel Anjo

3

No bootstrap 4, apenas uso e $(el).tooltip('dispose');depois recrio normalmente. Portanto, você pode colocar o descarte antes de uma função que cria uma dica de ferramenta para garantir que ela não duplique.

Ter que verificar o estado e mexer nos valores parece menos amigável.


Devemos chamar $ (el) .tooltip ('descarte') antes ou depois de atualizar o título da dica de ferramenta?
Fifi

@imabot descarte a dica de ferramenta antiga e recrie com novos dados. Se as suas dicas de ferramentas são complexas, convém recuperar ou armazenar a configuração inicial para que você possa recriar com essa configuração + novos valores. Espero que isso faça sentido.
Martin Lyne

2

Você pode definir o conteúdo da chamada de dica de ferramenta com uma função

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

Você não precisa usar apenas o título do elemento chamado.


2

Obrigado, este código foi muito útil para mim, achei eficaz em meus projetos

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


1

Destrua qualquer dica de ferramenta preexistente para que possamos repovoar com o novo conteúdo da dica de ferramenta

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

1

Não consegui obter nenhuma das respostas funcionando, aqui está uma solução alternativa:

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

0

Acho que Mehmet Duran está quase certo, mas houve alguns problemas ao usar várias classes com a mesma dica de ferramenta e seu posicionamento. O código a seguir também evita erros js, verificando se existe alguma classe chamada "tooltip_class". Espero que isto ajude.

if (jQuery(".tooltip_class")[0]){    

        jQuery('.tooltip_class')
            .attr('title', 'New Title.')
            .attr('data-placement', 'right')
            .tooltip('fixTitle')
            .tooltip('hide');

    }

0

Mude o texto alterando o texto no elemento diretamente. (não atualiza a posição da dica de ferramenta).

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

Altere o texto destruindo a dica de ferramenta antiga e criando e mostrando uma nova. (Faz com que o antigo desapareça e o novo desapareça)

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

Estou usando o método top para animar o "Salvamento". mensagem (usando &nbsppara que a dica de ferramenta não mude de tamanho) e altere o texto para "Concluído". (mais preenchimento) quando a solicitação for concluída.

$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.&nbsp;&nbsp;': text = 'Saving..&nbsp;'; break;
    case 'Saving..&nbsp;': text = 'Saving...'; break;
    case 'Saving...': text = 'Saving.&nbsp;&nbsp;'; break;
    }
    $('.tooltip-inner', parent).html(text);
}, 250);

send_request( function(){
    // When the request is complete
    clearInterval(interval_id);
    $('.tooltip-inner', parent).html('Done.&nbsp;&nbsp;&nbsp;&nbsp;');
    setTimeout(function() {
        $element.tooltip('hide');
    }, 1500 /* Show "Done." for a bit */);
});

0

Isso funcionou para mim: (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>

O atributo data-html="true"permite usar html no título da dica de ferramenta.


0

Com o objeto Dica de ferramenta Boostrap:

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

0

Para o BS4 (e o BS3 com pequenas alterações) .. depois de horas de pesquisa e testes, eu encontrei a solução mais confiável para esse problema e até resolve o problema de abrir mais de um (dica de ferramenta ou popover) ao mesmo tempo, e o problema de abrir automaticamente após perder o 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>


0

Eu só testei isso no bootstrap 4 e sem chamar .show ()

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

-1

você pode usar esse código para ocultar a dica de ferramenta, alterar seu título e mostrar a dica de ferramenta novamente, quando a solicitação ajax retornar com êxito.

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

-1

Estou usando este caminho 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');
});


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

Útil se você precisar alterar o texto de uma dica de ferramenta depois que ela foi inicializada com attr 'data-original-title'.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.