Инструментарий не работает должным образом в начале

Плагин Tooltipster действительно должен быть инициализирован перед всем этим. Использование mouseenterввода для запуска его инициализации каждый раз, когда пользователь наводил <td>элемент над элементом, не является большой практикой и является основной проблемой для вашей проблемы. В идеале вы хотели бы разбить его на следующее:

1. Найдите свои <td>элементы с определенным идентификатором.
2. Примените tooltipster к этим элементам.
3. Позвольте tooltipster обрабатывать все оттуда.

1. Поиск ваших <td>элементов

С магией jQuery вы можете получить их с умным использованием селекторов, а не запрашивать большой набор с вашей начальной реализацией, собранный из ответов в потоке StackOverflow здесь, jquery получает только все элементы html с идентификаторами , мы получаем:

$('td[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 (при инициализации) запускается по умолчанию при наведении указателя мыши на элемент, это означает, что ваш functionBeforeзапуск будет выполняться до этого события «наведения», заставляя ваш запрос AJAX запускаться каждый раз, после этого больше не нужно ничего делать: D

Надеюсь, это поможет! :)

Вы можете использовать этот код:

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