Использование qTip в Chrome Extension для отображения аннотации

Question

Использование qTip в Chrome Extension для отображения аннотации

0

Я создаю расширение Chrome для комментирования текста на любом веб-сайте. Пока он .onmouseover ввод в основное окно подсказки Javascript и отображает его обратно на .onmouseover в окне предупреждения. Тем не менее, я хочу использовать использование qTip2 jQuery-плагина вместо использования окна предупреждения.

Вот как выглядит мой 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, таким как класс или идентификатор, следующим образом:

$(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 работать над моей аннотацией?

ZeroDarkThirty 28 апр. 2014, в 18:50

Источник

2

Первым шагом было бы поместить ваши content.js ПОСЛЕ jQuery и qTip в ваш манифест.
rsanchez 28 апр. 2014, в 16:36
0

Где определен span который вы используете в span.onmouseover ?
Michael 28 апр. 2014, в 16:36

Теги:

javascript

jquery

google-chrome

google-chrome-extension

qtip

1 ответ

Ещё вопросы

Первым шагом было бы поместить ваши content.js ПОСЛЕ jQuery и qTip в ваш манифест.
Где определен span который вы используете в span.onmouseover ?

Michael · Answer 1 · 2014-04-28T15-34-00.000Z

Поскольку ваш объект span является элементом DOM, вы, вероятно, можете просто

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

после range.surroundContents(span); вместо строк .onmouseover, пока ваши ссылки jQuery и qTip2 уже действительны.

Вы можете передать элементы DOM в jQuery, чтобы получить объект jQuery для этого элемента, как показано в документации. Образец qTip просто хочет подключить действительный объект jQuery.

Чаще всего люди делают это с помощью селекторов, но там (возможно) нет причин, по которым вы не могли бы

создать экземпляр элемента DOM,
придерживайтесь его на странице,
получить для него объект jQuery,
и передать это qTip.

Я преобразовал элемент span в объект jQuery и включил его в qTip 2. Но не могли бы вы быть немного более ясными в отношении range.surroundContents(span); и .onmouseover биты? Спасибо!