工具提示器在第一次鼠标悬停时不显示答案

【问题标题】：tooltipster not showing on first mouseover工具提示器在第一次鼠标悬停时不显示
【发布时间】：2013-12-03 20:52:57
【问题描述】：

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

    });

【问题讨论】：

请展示您的 html 代码，其中包含带有 ID 的元素。

标签： jquery ajax mouseover tooltipster

【解决方案1】：

我正在做类似的事情，问题是我第一次将鼠标悬停在对象上时，工具提示器尚未初始化。第二次，它已经被我第一次尝试初始化了。

解决方案是在页面加载时初始化工具提示器。

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

【讨论】：

【解决方案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');
    });
});

【讨论】：