Javascript 在Chrome Extension中使用qTip显示注释

我正在构建一个Chrome扩展来为任何网站上的文本添加注释。到目前为止，它在一个基本的Javascript提示窗口中接受输入，并将其显示在一个警报框中的

.onmouseover

上。但是，我想使用qtip2jquery插件，而不是使用警报框

以下是my manifest.json当前的状态：

"content_scripts": [{"matches": ["http://*/*", "https://*/*"],
                      "js": ["content.js", "jquery-1.3.2.min.js", "jquery.qtip.min.js"],
                      "run_at": "document_start",
                      "all_frames": true
                    }],

以下是获取注释并显示它的代码段：

    function surroundSelection() {
    var span = document.createElement("span");
    span.style.backgroundColor="yellow";

    //prompt box to enter annotation
    var text = prompt("Enter annotation below:");

    //shows the annotated text on mouseover
    span.onmouseover=function(){
    alert(text);
}

    if (document.getSelection()) {
        var sel = document.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0).cloneRange();
            range.surroundContents(span);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

我已经浏览了几个qTip2的实际示例，它们都以以下方式处理一些HTML属性，如类或ID：

$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
   $('#content a[href]').qtip(
   {
      content: 'Some basic content for the tooltip' // Give it some content, in this case a simple string
   });
});

---

我的问题是如何让qTip处理注释？

由于您的

span

对象是一个DOM元素，您可能只需要

$(span).qtip({
     "key1": value1,
     "key2": value2,
          ...
     "keyN": valueN
});

后

范围。周围内容（span）而不是
.onmouseover
行，只要jQuery和qTip2引用已经有效

您可以将DOM元素传递给jQuery，以获取该元素的jQuery对象。qTip示例只需要插入一个有效的jQuery对象

大多数情况下，人们使用选择器来实现这一点，但是（可能）没有理由不这样做

实例化一个DOM元素
把它贴在书页上
为它获取jQuery对象
并将其传递给qTip
第一步是将content.js放在清单中jQuery和qTip之后。在
span.onmouseover
中定义的
span
在哪里？我已将span元素转换为jQuery对象，并将其插入qTip 2中。但是你能更清楚一点关于
范围的信息吗和
.onmouseover
位？谢谢