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

Question

我正在使用 Tooltipster library to generate tooltip and used their simple AJAX-custom-function example as a basis. I need to modify that though so instead of querying a static "http://example.com/ajax.php" as seen in their example it would instead get "http://example.com/ajax.php?id=contents_of_the_element_being_clicked". So for example, if I have a <span>textbook</span> in my HTML, the contents link for the popup would be "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>

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

Generate a tooltip in Tooltipster based on the contents of the element

ajax

jquery

tooltip

tooltipster