Question

我正试图找出使用tooltipster插件触发动态工具提示的最佳方法。基本上我有一个脚本循环出一堆带ID的元素。我从.hover事件中通过jquery获取ID，并将其传递给运行ajax调用的工具提示器小部件，并为该ID提取相应的数据。除了第一个.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'
      });
   }
);

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

tooltipster在第一次鼠标悬停时没有显示

2 个答案: