Tooltipster在开始时工作不正常

Question

我正在使用tooltipster插件工具，其中我得到了带有一些td给定id的甘特图。因此定义了哪个id，鼠标悬停在它上面将得到ajax数据并相应地显示。下面是我的代码片段。这里的问题是工具提示仅在我鼠标td几次后出现。此后它工作正常。我可以在调试窗口中看到调用ajax页面并看到此错误

工具提示器：已将一个或多个工具提示附加到此元素：忽略。使用“multiple”选项附加更多工具提示。 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插件确实应该在所有这些之前初始化。每次用户将鼠标悬停在mouseenter元素上时，使用<td>输入来触发它的初始化并不是很好的做法，并且是您的问题的根本问题。理想情况下，您可能希望将其细分为以下内容：

1. 找到您的<td>元素，其中 id已定义。
2. 将工具提示应用于这些元素。
3. 让tooltipster处理所有内容。

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。将工具提示应用于这些元素

我在这里没有做太多，因为你有很多注释掉的代码，所以我保持相同，稍作调整，这是我的“工作代码”版本：

$('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');
});