Подсказка не отображается при первом наведении мыши

Question

Я пытаюсь найти лучший способ вызвать динамическую подсказку с помощью плагина tooltipster. В основном у меня есть скрипт, который зацикливает кучу элементов с идентификаторами. Я получаю идентификатор через JQuery из .hover событие и передать его в виджет подсказки, который выполняет вызов ajax, извлекая соответствующие данные для этого идентификатора. Все отлично работает кроме первого .hover событие, потому что изначально отсутствует виджет всплывающей подсказки, связанный с элементом.

Я считаю, что мне нужно (я просто не знаю, как это сделать) - это надежный метод проверки наличия виджета подсказки, связанного с элементом, и, если нет, запуска мыши / наведения мыши в моем существующем скрипте.

Вот идея:

if(!$(this).tooltipster()){$(this).trigger('mouseover');}

Вот функция:

$(document).ready(function() {
                    $('.tooltip').hover(function(){
            var content = $(this).attr("id");

            if(!$(this).tooltipster()){$(this).trigger('mouseover');}

        $(this).tooltipster({
                animation: 'fade',
               delay: 0,
               speed: 250,
               theme: '.newtooltip',
                content: '<img src="images/ajaxcircle.gif" width="16" height="16" />',

            functionBefore: function (origin, continueTooltip) {

            continueTooltip();

            if (origin.data('ajax') !== 'cached') {
                $.ajax({
                    type: 'GET',
                    url: 'datagrab.html',
                    data: { ID: content},
                    success: function (data) {
                    origin.tooltipster('update', data).data('ajax ', 'cached');
                }
              });
            }
           }
         });
        });

    });

Answer 1

Я делал что-то похожее, и проблема заключалась в том, что когда я впервые наводил курсор на объект, всплывающая подсказка не была инициализирована. Во второй раз он был инициализирован моими попытками в первый раз.

Решение было инициализировать всплывающую подсказку при загрузке страницы.

 jQuery(document).ready
 (

   function()
   {
      /**Initialize all instances of tooltipster **/
      jQuery.fn.tooltipster('setDefaults', {
            theme: 'tooltipster-default'
      });
   }
);

                                        
                                    
                                

Answer 2

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

  var tooltipInstance;
    $("body").on('mouseover', '.tooltip:not(.tooltipstered)', function({
          tooltipInstance = $(this).tooltipster({ ... });
          tooltipInstance.tooltipster('open');
    });

В твоем случае:

$(document).ready(function(){
    var tooltipInstance;
    $("body").on('mouseover', '.tooltip:not(.tooltipstered)', function(){
        var content = $(this).attr("id");
        tooltipInstance = $(this).tooltipster({
            animation: 'fade',
            delay: 0,
            speed: 250,
            theme: '.newtooltip',
            content: '<img src="images/ajaxcircle.gif" width="16" height="16" />',

            functionBefore: function (origin, continueTooltip) {
                continueTooltip();
                if (origin.data('ajax') !== 'cached') {
                    $.ajax({
                        type: 'GET',
                        url: 'datagrab.html',
                        data: { ID: content},
                        success: function (data) {
                            origin.tooltipster('update', data).data('ajax ', 'cached');
                        }
                    });
                }
            }
        });
        tooltipInstance.tooltipster('open');
    });
});