jQuery - Ajax ToolTip, would like to pull URL instead of static image

Question

Using code from this site

   this.screenshotPreview = function(){ 
    /* CONFIG */

     xOffset = 10;
     yOffset = 30;

     // these 2 variable determine popup's distance from the cursor
     // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.screenshot").hover(function(e){
     this.t = this.title;
     this.title = ""; 
     var c = (this.t != "") ? "<br/>" + this.t : "";
     $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");         
     $("#screenshot")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px")
      .fadeIn("fast");      
    },
    function(){
     this.title = this.t; 
     $("#screenshot").remove();
    }); 
    $("a.screenshot").mousemove(function(e){
     $("#screenshot")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px");
    });   
};


// starting the script on page load
$(document).ready(function(){
    screenshotPreview();
});

The CSS

#screenshot{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    }

The Call:

<p>In order to test screenshot preview roll over the <a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a> link.</p>
    <p>If you want to see screenshot with caption, roll over this <a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">Css Globe</a> link.</p>

Wanted to know if I would fecth a URL instead of a image? Example Site

Answer 1

The documentation from the link you provided says this:

This demands a bit more effort but it might be worth it as an extra feature to add to your sites. What you'll need here is a small size screenshot of the target url. You'll put screenshot image location in in REL attribute of the A tag and script will do the rest.

And the second example link you provided is an example of the above: it does not grab a snapshot of a URL, which is not possible anyway as cross-domain ajax is not possible without jsonp.

So, use the call in your question:

<p>In order to test screenshot preview roll over the <a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a> link.</p>
<p>If you want to see screenshot with caption, roll over this <a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">Css Globe</a> link.</p>

Take the screen caps of the URLs you're interested in showing in your tooltips, and put the sources in the rel attributes of those links. If you want a caption, provide a title attribute. That's about all there is to it!