Изменение всплывающей подсказки данных с помощью AJAX не работает

Question

У меня есть кнопка в моем HTML-шаблон:

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

позже, в html-файле, у меня есть:

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

Это похоже на

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

должен изменить мою подсказку, но ничего не происходит. Любая идея, как успешно обновить всплывающую подсказку без обновления страницы? Я пробовал разные варианты вышеуказанной строки, но не могу обновить ее.

Answer 1

Вы можете использовать tooltip функция для этого:

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

Answer 2

Попробуй это:

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