在 Tooltipster 中根据元素的内容生成一个工具提示

Question

我正在使用Tooltipster 库来生成工具提示，并使用他们简单的AJAX-custom-function 示例作为基础。我需要修改它，而不是像在他们的示例中看到的那样查询静态“http://example.com/ajax.php”，而是得到“http://example.com/ajax.php?id=contents_of_the_element_being_clicked”。例如，如果我的 HTML 中有 <span>textbook</span>，则弹出窗口的内容链接将是“http://example.com/ajax.php?id=textbook”。

我已成功地将示例重新用于在每个<span> 上激活，但我无法理解如何将 <span> 的 innerHTML 内容带入。

所以我要寻找的是用元素内容填充变量的一行，我稍后可以将其附加到 $.get ... function(data) 请求。

Answer 1

您可以使用jquery 中的html() 函数来提取内部html。此外，您可以使用param()对提取的html进行编码。

var param = "?" + $.param({ id: origin.html() });       

完整示例（使用 Tooltipster 3.3.0 和 jQuery 1.10）：

$('.tooltip').tooltipster({    
    functionBefore: function(origin, continueTooltip) {
        var param = "?" + $.param({ id: origin.html() });       
        if (origin.data('loaded') !== true) {
            $.get('example.com/ajax.php' + param, function(data) {
                origin.data('loaded', true);
                origin.tooltipster('content', data.id);
                continueTooltip();
            });            
        }
        else {
            continueTooltip();        
        }
    }
});

Tooltipster Version 4:

$('.tooltip').tooltipster({    
    content: 'Loading...',
    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);
        var param = "?" + $.param({ id: $origin.html() });       
        if ($origin.data('loaded') !== true) {
            $.get('example.com/ajax.php' + param, function(data) {
                instance.content(data.id);
                $origin.data('loaded', true);
            });            
        }
    }
});

HTML：

<span class="tooltip" title="This is my span's tooltip message!">Some text test</span>