2

我正在使用tooltipster插件工具，在其中我用一些td给定id的 .
因此，无论哪个id被定义，鼠标悬停在它上面都会得到ajax数据并相应地显示。

下面是我的代码片段。这里的问题是，工具提示仅在我将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');
                }
            });
        //}
    }
  });

});
4

2 回答 2

4

Tooltipster 插件确实应该在所有这些之前初始化。mouseenter每次用户将鼠标悬停在元素上时，使用enter 触发它的初始化<td>并不是很好的做法，并且是您问题的根本问题。理想情况下，您希望将其分解为以下内容：

  1. 找到定义了id 的<td>元素。
  2. 将 tooltipster 应用于这些元素。
  3. 让 tooltipster 从那里处理一切。

1. 寻找你的<td>元素

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

$('td[id]')

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

$('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

我希望这有帮助！:)

于 2014-06-12T08:26:43.500 回答
0

您可以使用此代码：

var tooltipInstance;
$("body").on('mouseover', 'td[id]:not(.tooltipstered)', function(){
    tooltipInstance = $(this).tooltipster({
        //your code ...
    });
    tooltipInstance.tooltipster('open');
});
于 2016-10-16T12:11:47.280 回答