Search code examples
javascriptjquerytooltipster

Updating html content in tooltipster after AJAX success


I have interactive html content in a tooltipster which is opened when clicking a trigger icon. After submitting data via AJAX I want the content of the tooltip to be replaced with the returned data. Whilst the returned data is shown, the tooltip has at this point closed and only becomes visible when hovering over the original opening trigger.

This is my jQuery for the tooltipster:

$(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 ...'); 
        });
    });
});

I assume it's .tooltipster('destroy') that is closing the tooltip, but if I try to replace the content without using destroy first, I get an error saying

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

Is it possible to replace my content without the tooltipster closing?


Solution

  • For the benefit of others who may want to do this, I resolved the problem like this:

    .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');
    })