AJAX 成功后更新工具提示中的 html 内容

Question

我在单击触发器图标时打开的工具提示中有交互式 html 内容。通过 AJAX 提交数据后，我希望将工具提示的内容替换为返回的 data。在显示返回数据的同时，工具提示此时已关闭，只有在将鼠标悬停在原始打开触发器上时才可见。

这是我的 jQuery 工具提示：

$(document).ready(function() {
    $(".layout-save").click(function(e) {
        e.preventDefault();     
        var form = $(".image_define");
        var params = form.serializeArray();
        var formData = new FormData();
        formData.append('default_image', $('#default_image')[0].files[0]);

        $(params).each(function (index, element) {
            formData.append(element.name, element.value);
        });

        $.ajax({
            url: form.attr('action'),
            method: "post",
            data: formData,
            contentType: false,
            processData: false
        })
        .done(function(data) {
            $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster('destroy');
            $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster({ 
                content: data,
                contentAsHTML: 'true'
            });
        })
        .fail(function() {
            alert('Ajax Submit for New Image Save Failed ...'); 
        });
    });
});

我假设是 .tooltipster('destroy') 关闭了工具提示，但是如果我尝试在不先使用 destroy 的情况下替换内容，我会收到一条错误消息

Tooltipster: one or more tooltips are already attached to the element below. Ignoring.

是否可以在不关闭工具提示的情况下替换我的内容？

Answer 1

试试这个：

$('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster('update', data);

Answer 2

为了其他可能想要这样做的人的利益，我这样解决了这个问题：

.done(function(data) {
            $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster('destroy');
            $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster({ 
            content: data,
            contentAsHTML: 'true',
            interactive: 'true'
            });
            $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster('open');
            $('.tooltip-imageHandler-<?php echo $products_filter; ?>').tooltipster('reposition');
})

Answer 3

工具提示文档有一个更新方法'content'，第二个参数可以传递您的设置或只是一行新文本。示例：

.im_tooltip {
  display:block;
  width: 100px;
  height: 20px;
  background-color: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>

<div class="im_tooltip" title="I'm default init tooltip">Hover me</div>

<button class="change" type="button">Update tooltip</button>

<script>
  $('.im_tooltip').tooltipster();

  $('.change').on('click', function(){
    $('.im_tooltip').tooltipster('content', 'I am change content in tooltip');
  })
</script>

AJAX 成功后更新工具提示中的 html 内容

Updating html content in tooltipster after AJAX success

javascript

jquery

tooltipster