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"
                    },

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

Alfie Woodland · Accepted Answer · 2021-02-04 13:54:35Z

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

answered Feb 4, 2021 at 13:54

Alfie Woodland

8441 gold badge12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Olaf · Accepted Answer · 2021-02-04 12:41:40Z

0

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.

answered Feb 4, 2021 at 12:41

Olaf

1,1328 silver badges20 bronze badges

1 Comment

Berstos Over a year ago

Thanks for your help. I´ve made a JSFiddle.

Collectives™ on Stack Overflow

Loading AJAX content inside jQuery tooltip while hovering

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related