Why the Ajax content of this jQuery plugin (Toolti

Question

I can't find a solution for this plugin since I cannot find any working demo or documentation for external content via Ajax.

Basically I have a simple div with a mouse hover JS function:

<div onmouseover="myFunct(this,'.$comment['id'].');"  >Hover Me</div>

And this is my JS function:

function myFunct(element, id){

    $(element).tooltipster({
        contentCloning: true,
        interactive:true,
        maxWidth:250,
        contentAsHTML:true,
        content: 'Loading...',

        // 'instance' is basically the tooltip. More details in the "Object-oriented Tooltipster" section.
        functionBefore: function(instance, helper) {

            var $origin = $(helper.origin);

            // we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
            if ($origin.data('loaded') !== true) {

                $.ajax({
                    type: "POST",
                    url: baseUrl+"/requests/load_profilecard.php",
                    data: 'id='+id+"&token_id="+token_id,
                    cache: false,
                    success: function(html) {           
                    // call the 'content' method to update the content of our tooltip with the returned data
                    instance.content(html);

                    // to remember that the data has been loaded
                    $origin.html('loaded', true);
                    }

                });
            }
        }
    });

}

Why the tooltip is shown only at the 2nd mouse hover?

Here is a similar Eg. JSFiddle

UPDATE

Thanks to the support this has solved my issue:

<div class="tooltip" data-id="'.$comment['id'].'">Hover me!</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.tooltip').tooltipster({
        content: 'Loading...',
        functionBefore: function(instance, helper){
            var $origin = $(helper.origin);
            $.ajax({
                type: "POST",
                url: baseUrl+"/requests/load_profilecard.php",
                data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
                cache: false,
                success: function(html) {           
                    // call the 'content' method to update the content of our tooltip with the returned data
                    instance.content(html);

                }
            });   
        },
        interactive:true,
        contentAsHTML:true,
        maxWidth:250
    });
});
</script>

Anyway this doesn't work on Ajax dynamic content, and I don't know why (I tried to insert it on Ajax page, no way)

Answer 1

I'd recommend a few things: first, separate your JS from your HTML (this is considered best practice), second, initialize Tooltipster on page load, and last, remove the wrapper function. Once the tooltip is initialized your code will trigger by default on hover.

Separate JS from HTML

<div class="hover-me tool-tip" data-commentId="12345">Hover Me</div>

Initalize Tooltipster on Document Ready

$(document).ready(function() {
    $('.tooltip').tooltipster();
});

Trigger Tooltipster with Hover

$('.hover-me').tooltipster({
    // all of your code from above

    functionBefore: function(){
        var commentId = $(this).attr('data-commentId');
    }
});

Note:

The default trigger for Tooltipster is hover (as seen in the documentation), however, you could explicitly set it by passing in trigger: hover, which would make your code slightly more readable and as such maintainable.

Tooltipster Support Recommendation (as seen in the comments)

I add this because it reinforces my solution above and adds context for future devs...that, and it might be overlooked in the comments section.

You initialize your tooltip when the mouseover event has already been fired, so Tooltipster cannot "hear" this first event and open the tooltip. You'd better initialize your tooltips at page load and put your comment id in a data-id attribute that you'll retrieve in functionBefore when you prepare your ajax call.