1

我正在尝试找出使用 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');
                }
              });
            }
           }
         });
        });

    });
4

2 回答 2

1

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

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

 jQuery(document).ready(function(){
      /**Initialize all instances of tooltipster **/
      jQuery.fn.tooltipster('setDefaults', {
            theme: 'tooltipster-default'
      });
   }
);
于 2014-02-25T23:20:37.743 回答
0

你可以使用这个： 

  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');
    });
});
于 2016-10-16T11:47:22.380 回答