Loading problems with jQuery AJAX generated tooltips

Lestos

Hello,

My table data is generated via a server sided script (fetch44.php). Now I want to add jQuery tooltips which content is also generated with a server sided script (itemscript.php). The indicator for the tooltips is the <a data-id="" attribute.

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

I´ve set up a test page. You can hover over the links in the table column "title" to see the "tooltip loading" problem.

Thanks for help.

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

     var category = "";
     load_data();

    function load_data(is_category) {
        var dataTable = $('#product_data').DataTable

            ({
                "processing": true,
                "serverSide": true,
                "order": [],
                "iDisplayLength": 10,
                "deferRender": true,
                "sDom": "tipr",
                columnDefs: [
                    {
                        "targets": 1,
                        "render": function (data, type, row, meta) {
                            var itemID = row[0];
                            return '<a href="" data-id="' + itemID + '">' + data + '</a>';
                        }
                    },
                ],

                "ajax": {
                    url: "/fetch44.php",
                    type: "POST",
                    data: {
                        is_category: is_category
                    },
                },
            });
    }

    $('#product_data').on('draw.dt', function () {

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

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

            $.ajax({
                url: "../datenbank/itemscript.php",
                type: "GET",
                cache: "true",
                data: {
                    "var": id,
                    "itemlevel": itemlevel
                },

                success: function (data) {

                    let $content = $(data);
                    let title = $content.siblings('[class^=item-titletl]').text()
                    let icon = $content.siblings('[class^=parent2]').html()

                    var item_title = $content.siblings('div[class*="item-title"]');
                    var ClassName = '';
                    var classes = item_title.attr('class').split(/(\s+)/);
                    $.each(classes, function (i, v) {
                        v = v.trim();
                        if (v.indexOf('item-title') > -1) {
                            ClassName = v;
                        }
                    });

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

                    });

                    $tooltip.attr("title", "=")

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

kthorngren

The problem is because Ajax is an async process and not a Datatables issue. Can you load the tooltip data with each row in your fetch44.php script so you don't have to send Ajax requests each time you hover over the Title? If you look at the network inspector you will see a request each time you hover over the same title and another request when you leave the cell.

Kevin

Lestos

You´re absolutely right with the amount of ajax requests. I´ve fixed that problem with an "ajax manager".
Now you have one AJAX request send when hovering the first time over the title and not each time.

But the problem that you need to hover twice over the title to show the tooltip still exists.

Could you take a look again please?

kthorngren

Like I said its not a Datatables issue. You will likely get better answers on Stack Overflow about how to handle tooltips with Ajax request. something like this thread.

Kevin