Tooltipster 在开始时无法正常工作

Posted 2023-05-07

【中文标题】Tooltipster 在开始时无法正常工作

【英文标题】：Tooltipster not working properly in the beginning

【发布时间】：2014-07-30 04:21:14

【问题描述】：

我正在使用 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');
                
            );
        //
    
  );

);

【参考方案1】：

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

找到您的<td> 元素 id 已定义。 将工具提示器应用于这些元素。 让工具提示器从那里处理一切。

1。查找您的 <td> 元素

借助 jQuery 的魔力，您可以巧妙地使用选择器来获取这些信息，而不是使用您的初始实现查询更大的集合，从此处的 *** 线程 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

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

【讨论】：

我需要澄清一下如何“在这一切之前初始化。”？我该怎么办？在哪里调用这个 $('td').filter(function() return $(this).attr('id') !== undefined; );

@user2711681 将上面的代码放在文档就绪块中，例如$(document).ready(function() /** the code goes here **/ );

是的，我已经完成了这个 $('td').filter(function() return $(this).attr('id') !== undefined; );以及如何捕获要设置到我的 idval 变量中的 id？我仍然看到它在需要两到三倍的地方落后。我已经用我的最新代码更新了我的问题。

@user2711681 这只是$('td[id]') 的替代品，如果您对此感到满意，则无需使用它。您始终可以使用$(this).attr('id') 设置您的idval，我已经更新了我的答案以反映这一点:)

好吧，它工作得很好，但我仍然需要至少 2 次鼠标悬停，然后才会出现工具提示。但是从调试日志中，我可以看到当我将鼠标悬停时调用了我的 ajax 页面。有什么解决办法吗？

【参考方案2】：

您可以使用此代码：

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