Ändern Daten-Tooltip mit AJAX nicht funktioniert

Question

Ich habe eine Schaltfläche in meiner HTML-Vorlage:

  <a class="tooltipped" id="stash_recipe_tooltip" data-position="bottom" data-delay="50" 
       data-tooltip="{{ stash_tooltip }}"> 
       <div id="stash_recipe_btn" class="detail_footer_btn btn-floating col2 center"> + </div> 
      </a> 

später, in der HTML-Datei, die ich habe:

<script> 
function add_recipe_to_stash() { 
    var stash_plus_or_minus = document.getElementById("stash_recipe_btn").innerHTML 
    $.ajax({ 
    url: '/ajax/add_recipe_to_stash/', 
    type: 'GET', 
    data: { 
     # this goes to a django view that, in essence, returns a new 'stash_tooltip' var and 'stash_plus_or_minus' var 
     'stash_plus_or_minus': stash_plus_or_minus, 
    }, 
    dataType: 'json', 
    success: function (data) { 
     document.getElementById("stash_recipe_btn").innerHTML = data.stash_plus_or_minus; 
     $("#stash_recipe_tooltip").attr('data-tooltip', data.stash_tooltip); 
    } 
    }); 
} 
function addClickHandlers() { 
    $("#stash_recipe_btn").click(add_recipe_to_stash); 
} 
</script> 

Es scheint wie

$("#stash_recipe_tooltip").attr('data-tooltip', data.stash_tooltip); 

sollte meine Tooltip ändern, aber nichts passiert. Haben Sie eine Idee, wie Sie den Data-Tooltip erfolgreich aktualisieren können, ohne die Seite zu aktualisieren? Ich habe verschiedene Variationen der obigen Zeile ausprobiert, aber ich kann es nicht aktualisieren.

Answer 1

können Sie verwenden, um die tooltip Funktion dafür:

success: function (data) { 
    document.getElementById("stash_recipe_btn").innerHTML = data.stash_plus_or_minus; 
    $("#stash_recipe_tooltip").tooltip('tooltip', data.stash_tooltip); 
} 

Answer 2

starten:

$('#someElement').prop('tooltipText', 'new title');