AJAX 成功后在 tooltipster 中更新 html 内容

Posted 2023-05-07

【中文标题】AJAX 成功后在 tooltipster 中更新 html 内容

【英文标题】：Updating html content in tooltipster after AJAX success

【发布时间】：2019-01-07 19:35:54

【问题描述】：

我在单击触发器图标时打开的工具提示器中有交互式 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：一个或多个工具提示已附加到元素 以下。忽略。

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

【参考方案1】：

试试这个：

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

【讨论】：

这会在控制台中出现未捕获错误：未知方法“更新”

github.com/iamceege/tooltipster/issues/370 参考链接。你有你的答案

如原始问题所示，我已经尝试过.tooltipster('content', 'new content')，但是如果不先清除原始内容，这将不起作用。使用 'destroy' 的问题是当它被触发时工具提示会关闭。添加“重新定位”无济于事，因为工具提示仍处于关闭状态，并且仅当您将鼠标悬停在触发器图标上时才会显示替换的内容。如果有办法在内容被替换后强制工具提示重新打开，则该方法可能可用。

【参考方案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');
)

【参考方案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>