javascript - Using qTip in Chrome Extension to show annotation -

-

I am creating a Chrome extension to explain text on any website. So far it takes input into an original Javascript prompt window and displays it in a warning box on .onmouseover . However, I want to employ the use of the qTip2 jQuery plugin instead of using the alert box. <{P> 

  "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}],

Here is the snippet that takes annotation and displays it: 

  function forward () {var span = document createElement ("time"); Span.style.backgroundColor = "yellow"; // Enter the annotation in the prompt box var text = prompt (Enter the annotation below: "); // Mouseover shows annotated text on the span. Onmausover = function () {warning (text);} if (document. GetSelection ()) {var sel = document.getSelection (); if (sel.rangeCount) {var category = sel.getRangeAt (0) .cloneRange (); range.surroundContents (period); sel.removeAllRanges (); sel AddRange (Range);}}}

I have seen examples of qTip2 in some functioning, and they all have the following HTML attributes such as class or ID Do not work in: 

  $ (document) .ready (function () {// content div $ ('# content a [href]') All links with href attributes Elements to match. Qtip ({some basic material tooltip for {content: // give it some content, a simple string in this case}}}};

My question is How do I get qTip to work on my comment?

Since your span Object is a DOM element, so you probably Only 

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

after range.surroundContents (span); Instead of .onmouseover line, your jQuery and qTip2 references are already valid.

You can pass DOM elements in jQuery to get a jQuery object for that element. The QTip sample simply wants a valid jQuery object to plug in.

  • Get a jQuery object for it,
  • and pass it on qTip.

    • Comments

    Post a Comment

    Popular posts from this blog

    Editing Python Class in Shell and SQLAlchemy -

    -
    I am working on the terminal on a shell script after this tutorial SQLAlchemy tutorial. I need to type gt; & Gt; & Gt; Sqlalchemy import column, integer, string & gt; & Gt; & Gt; Class user (base): __tablename__ = 'users' id = column (integer, primary_key = true) name = column (string) absolute name = column (string) password = column (string) def __repr __ (self): return "& lt ; User (name = '% s', absolute name = '% s', password = '% s') & gt; "% (Self.name, self.fullname, self.password) After the problem I have typed the password = column (string) I hit twice and changed .... >> I then took everything back but then an error was thrown because the class already exists ... I am not completely sure how to fix it. How do I open that slip in the shell script and edit it (Add DF to DRR) The error thrown below: / user / giripeters / TFSQLLX / Lib / python2.7 / site-packages / sqlalchemy / ext / decla...
    Read more

    import - Python ImportError: No module named wmi -

    -
    I followed the instructions for downloading WMI for Python When I try to run the code for C.Win32_Service (StartMode = "Auto", state = "Stopped") import wmi c = wmi.WMI (): if Raw_input ("restart% s?"% S.Caption) .upper () == "Y": s.StartService () I got the error traceback (most recent call end): file ". \", Line 1, edit: I am using Python 2.7.6 EDIT2: I am running 64-bit Windows 2008 R2, and I've downloaded WMI-1.4.9.zip (md5). I removed the content and put it in D: Python \ Tools \ Scripts I executed dragon setup.py.install I said D : \ Python \ tools \ scripts to% PATH% and when I execute the code for C.Win32_Service (StartMode = "Auto", state = "Stopped") import wmi c = Wmi.WMI (): If raw_input ("Restart% s?"% S. Caption). () == "Y": s.StartService () error me Gets traceback (most recent call final): File ". See \", line 1, & lt; Modu...
    Read more

    uislider - In a MATLAB GUI, how does one implement a continuously varying slider from a GUIDE created .m file? -

    -
    I am trying to create a GUI with a plot and a slider. The slider should be described as continuously and output. I have a problem with this explanation that the uicontrol object is programmatically created, on the contrary, I want to know that in the last three instances, to complete the same thing done according to the program What can be added to a GUI file that is created. The code is down, and I have marked the (wrong) code that is provided by some of the above examples. Thanks a lot for any help! This slider function sets P1_slider_Callback (hObject, eventdata, handle) (handle, dragon, 'string', num2str (get (hObject, 'value'), 3)) PlottheData_Callback ( HOBject, EventData, Handle)% "PlotHeadata" is a button that creates the data slider based on the value of P1_slider%, and I think that here "p1_slider_CreateFcn" (hObject, eventdata, handle) needs to be assembled (HOBJECT, 'BackgroundRoller'), (0, 'Default UITTACKBACK MANDROLLE...
    Read more