工具提示一开始无法正常工作

Question

我正在使用tooltipster插件工具，在该工具中，绘制了带有给定ID的td的甘特图。 因此，定义了哪个id并将其悬停在其上的鼠标将获取ajax数据并相应地显示。以下是我的代码段。 这里的问题是，只有在我单击td几次后，工具提示才会出现。 此后，它工作正常。 我可以在调试窗口中看到ajax页面被调用，并且也看到此错误

工具提示：此元素已附加一个或多个工具提示：忽略。 使用“多个”选项来附加更多工具提示。 jquery.tooltipster.min.js：1

  $(document).ready(function () {

      $('td[id]').tooltipster({
    // content: 'Loading...',
     functionBefore: function(origin, continueTooltip) {
        // We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
        continueTooltip();
        var idval=0;
        // Next, we want to check if our data has already been cached
        //if (origin.data('ajax') !== 'cached') {
            $.ajax({
                type: 'GET',
                url: 'getDetails.php',
                data:idval,
                success: function(data) {
                    // Update our tooltip content with our returned data and cache it
                    //alert("Data is : "+data);
                    var finalData = 'Total Data : 300 <br> Total Completed : 200';

                    //alert("DATA");
                    //origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')

                   origin.tooltipster({
                        content: finalData,
                        multiple: true,
                        contentAsHTML: true
                    });

                    //origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
                }
            });
        //}
    }
  });

});

Answer 1

Tooltipster插件确实应该在所有步骤之前进行初始化。 每当用户将鼠标悬停在<td>元素上时，使用mouseenter输入触发它的初始化不是一个好习惯，这是问题的根本问题。 理想情况下，您希望将其细分为以下内容：

1. 找到定义了 ID的<td>元素。
2. 将工具提示应用于这些元素。
3. 让工具提示者从那里处理所有事情。

1.查找<td>元素

借助jQuery的魔力，您可以巧妙地使用选择器来获取这些信息，而不用使用初始实现来查询更大的集合（从此处StackOverflow线程的答案中收集）， jquery仅获取所有具有id的html元素 ，我们得到：

$('td[id]')

这将获取定义了ID的所有<td>元素，请注意，如果您有一个扩展表，这可能会有点慢。 或者，您可以选择，然后应用filter以缩小设置范围：

$('td').filter(function(){
    return $(this).attr('id') !== undefined;
});

两者基本上会做同样的事情！

2.将工具提示应用于这些元素

因为您有很多注释掉的代码，所以我在这里没有做太多事情，因此，我做了一些细微的调整，将其保持不变，这是我的“工作代码”版本：

$('td[id]').tooltipster({
    // content: 'Loading...',
   functionBefore: function(origin, continueTooltip) {
        // We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
        continueTooltip();

        // Next, we want to check if our data has already been cached
        //if (origin.data('ajax') !== 'cached') {
            $.ajax({
                type: 'GET',
                url: 'getDetails.php',
                data: $(this).attr('id'),
                success: function(data) {
                    // Update our tooltip content with our returned data and cache it
                    //alert("Data is : "+data);
                    var finalData = 'Total Data : 300 <br> Total Completed : 200';

                    //alert("DATA");
                    //origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')

                   origin.tooltipster({
                        content: finalData,
                        multiple: true,
                        contentAsHTML: true
                    });

                    //origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
                }
            });
        //}
    }
});

3.让工具提示从这里处理一切

当鼠标悬停在元素上时，默认情况下会触发工具提示（当初始化时），这意味着您的functionBefore将在此“悬停”事件之前运行，从而使您的AJAX请求每次都运行，此后无需执行任何其他操作：D

我希望这有帮助！ :)

Answer 2

您可以使用以下代码：

var tooltipInstance;
$("body").on('mouseover', 'td[id]:not(.tooltipstered)', function(){
    tooltipInstance = $(this).tooltipster({
        //your code ...
    });
    tooltipInstance.tooltipster('open');
});