Loading AJAX content inside jQuery tooltip while hovering

Question

I'm using the jQuery UI Tooltip plugin. The tooltip content is generated with AJAX.

The indicator for the tooltips is the <a data-id="" attribute:

 <a data-id="137514" title="">Testlink1</a>

I have the problem that I need to hover twice over the link to get the tooltips and its AJAX content loaded. The tooltips and their content should be loaded with the first hover.

I´ve set up a JSFiddle . You can hover over the links to see the loading problem.

jQuery(document).ready(function ($) {

    var ajaxManager = $.manageAjax.create('cacheQueue', {
        queue: true,
        cacheResponse: true
    });

    $('*[data-id]').hover(function () {

        let $tooltip = $(this);
        let id = $tooltip.attr("data-id");

        ajaxManager.add({
            url: "../datenbank/itemscript.php",
            type: "GET",
            cache: "true",
            data: {
                "var": id
            },

            success: function (data) {

                $tooltip.tooltip({
                    tooltipClass: "tooltipitem",
                    content: data,
                    hide: {
                        effect: "slideDown",
                        delay: 0
                    },
                    position: {
                        my: "left+153 top+20",
                        collision: "flipfit"
                    },

                });
            }
        });
    });
});

Answer 1

Until you call the.tooltip() function, there is no listener on the element for a mouseover event. Because you create the tooltip when the mouse is already hovering over the element, this event never fires until you move your mouse off it, and then back on again.

You need to create the tooltips immediately, then set the content after loading the data. I've modified your JSFiddle to demonstrate.

Initially, the tooltip just contains a loading message: <p class="item-desc">Loading...</p>

Then when the content loads, the data is inserted: $tooltip.tooltip({ content: data });

Answer 2

The problem is that the tooltip element does not exist from the get-go. It gets spawned after you hover once. Your function has a race condition with the JQuery UI hover function.You need to make sure your on-hover happens after the tooltip is spawned.

Another workaround would be to search for the right element in the success callback.

If you post a broken example in a sandbox I'll be able to help out further.