Tooltipster 在开始时无法正常工作

Question

我正在使用 tooltipster 插件工具，在该工具中我得到了 甘特图，其中包含一些 td 给定的 id。
所以，id 被定义了，鼠标悬停在它上面会得到 ajax 数据并相应地显示出来。

下面是我的代码的 sn-p。这里的问题是工具提示仅在我将鼠标单击td 几次后才出现。此后，它工作正常。
我可以在调试窗口中看到调用了 ajax 页面并出现以下错误：
Tooltipster: one or more tooltips are already attached to this element: ignoring. Use the "multiple" option to attach more tooltips. 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. 找到您的<td> 元素 id 已定义。
2. 将工具提示器应用于这些元素。
3. 让工具提示器从那里处理一切。

1。查找您的 <td> 元素

借助 jQuery 的魔力，您可以巧妙地使用选择器来获取这些信息，而不是使用您的初始实现查询更大的集合，从此处的 StackOverflow 线程 jquery get only all html elements with ids 中的答案收集，我们得到：

$('td[id]')

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

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

两者本质上都是一样的！

2。将 tooltipster 应用于这些元素

因为你有很多注释掉的代码，所以我在这里没有做太多，所以我保持不变，只是做了一些小的调整，这是我的“工作代码”版本：

$('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。让 tooltipster 从这里处理所有事情

当鼠标悬停在一个元素上时默认触发Tooltipster（初始化时），这意味着你的functionBefore将在这个“悬停”事件之前运行，导致你的AJAX请求每次都运行，没有必要做之后还有什么：D

我希望这会有所帮助！ :)

Answer 2

您可以使用此代码：

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