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来替换内容，则会出现错误提示

工具提示：元素上已经附加了一个或多个工具提示下面。忽略。

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

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

tooltipster文档中有一个更新方法“ 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内容

3 个答案: