工具提示一開始無法正常工作

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