首页 文章

Tooltipster无法正常工作

提问于
浏览 1945
3

我正在尝试编写一个chrome扩展,它会突出显示某些名称,并在工具提示中提供有关该名称的其他信息 . 基本上,我有一个名称和ID的对象,如下所示:

var list = {
    'Name1' : 'ID0001',
    'Name2' : 'ID0002',
}

然后我使用jQuery高亮插件突出显示文档中每个键的出现,并为span元素分配一个与键值对应的类(例如ID0001),这很好用...

$.each(list, function(key, value) {
    $("p").highlight(key, {caseSensitive: false, className: value });
});

结果如下:

<span class="ID0001">Name_1</span>

接下来,我正在尝试选择具有包含ID的第一部分的类名的每个元素并激活Tooltipster:

$('span[class*=ID]').tooltipster({
    interactive: true,
    content: $(<p>Loading...</p>),
    contentAsHTML: true,
    functionBefore: function(origin, continueTooltip) {
        continueTooltip();

        // Below, I'm trying to get whole ID, without the 
        // 'tooltipstered' class, that Tooltipster assigned.
        var id = $(this).attr('class').replace(' tooltipstered','');

        $.getJSON(chrome.extension.getURL('db.json'), function(db) {
        // Inside here, I'm using the ID to get information from a json 
        // file and store it in a variable called 'content', e.g.
        var content = '<p>db[id].link</p>';

        // Then I'm trying to update the content of the tooltip:
            origin.tooltipster({
                content: content,
                contentAsHTML: true
        });
   }
});

所有这些代码都在这里:

$(document).ready(function() {  });

现在,如果我第一次将鼠标悬停在内部名称的范围内,则工具提示器将不会执行任何操作,Chrome控制台会说:

Uncaught ReferenceError: content is not defined

但我第二次将它悬停在它上面,它会向我显示正确的内容 . 此外,如果我第一次将鼠标悬停在名称上,而第二次悬停在另一个名称上,则工具提示将显示第一个名称的内容 .

我是JS和jQuery的新手,我不知道我在这里做错了什么 .

我找到了一些关于类似问题的其他线索,但没有一个提议的解决方案适合我 .

这是“完整的”更新代码:

$(document).ready(function() {
$.each(list, function(key, value) {
    $("p").highlight(key, {caseSensitive: false, className: value });
});

$('span[class*=ID]').tooltipster({
    interactive: true,
    contentAsHTML: true,
    content: 'Loading...',
    functionBefore: function(origin, continueTooltip) {
        continueTooltip();
        var id = $(this).attr('class').replace(' tooltipstered','');
        var content = generate_content(id);
        origin.tooltipster('content', content);
    }

});

function generate_content(id) {
    $.getJSON(chrome.extension.getURL('db.json'), function(db) {
        // Getting information from the .sjon and storing it in "content"
    });
    return content;
}

});

1 回答

  • 0

    由于对$ .getJSON的调用是异步的,因此您应该在$ .getJSON的完成回调中更新工具提示器的内容 . 您可以使用类似下面的代码 -

    $('span[class*=ID]').tooltipster({
        interactive: true,
        contentAsHTML: true,
        content: 'Loading...',
        functionBefore: function(origin, continueTooltip) {
            continueTooltip();
            var id = $(this).attr('class').replace(' tooltipstered','');
            generate_content(id, origin);
        }
    });
    
    function generate_content(id, origin) {
        $.getJSON(chrome.extension.getURL('db.json'), function(db) {
            // Getting information from the .sjon and storing it in "content"
             var content -  set the content here.
             origin.tooltipster('content', content);
    
        });
    }
    

    })

相关问题