I need help in making my image tooltip work
<p>I'm creating a web application. One of the pages is recursively scan all the folders in the server's D: drive including all its sub-folders and files and put it on a gridview. One of the column of this gridview contains the name of the file.</p>

<p>What I want to do is to make an image tool-tip so that when we hover the mouse to any image file it will show up a pop up that contains the image.</p>

<p>Here's my code for my external js(jquery) file:</p>

<pre><code>this.screenshotPreview = function() {
    xOffset = 10;
    yOffset = 30;

    $(".lFilename").hover(function(e) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "&lt;br/&gt;" + this.t : "";
        var result = $("#grdlinkFilename").data("id");
        result = result.replace(/\\/g, "\\\\");
        result = result.replace(/D:\\/i, "http://192.000.0.00/Vdrive/");
        result = result.replace(/\\/g, "/");
        $("body").append("&lt;p id='lFilename'&gt;&lt;img src='" + result + "'/&gt;" + c + "&lt;/p&gt;");
        $("#lFilename").css("top", (e.pageY - xOffset) + "px")
                       .css("left", (e.pageX + yOffset) + "px")
                       .fadeIn("fast");
    },
    function() {
        this.title = this.t;
        $("#lFilename").remove();
    });
    $(".lFilename").mousemove(function(e) {
        $("#lFilename").css("top", (e.pageY - xOffset) + "px")
                       .css("left", (e.pageX + yOffset) + "px");
    });
};

$(document).ready(function(){
    screenshotPreview();
});
</code></pre>

<p>And this is my <code>&lt;ASP:LinkButton/&gt;</code> located inside a <code>&lt;ASP:Gridiew/&gt;</code>.</p>

<pre><code>&lt;asp:LinkButton runat="server" CssClass="lFilename" ID="grdlinkFilename"
                Text='&lt;%#Eval("FILENAME")%&gt;'
                CommandArgument='&lt;%#Eval("FILEPATH")%&gt;'
                OnCommand="grdlinkFilename_click"
                data-id='&lt;%#((string)Eval("FILEPATH")).Replace(@"\", @"\\")%&gt;'&gt;
&lt;/asp:LinkButton&gt;
</code></pre>

<p>For some reason it's not behaving the way I expected it to be Or nothing happens at all.</p>

<p>I tried to do this in my js file as a test:</p>

<pre><code>this.screenshotPreview = function() {
    xOffset = 10;
    yOffset = 30;

    $(".lFilename").hover(function(e) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "&lt;br/&gt;" + this.t : "";
        var result = "D:\\sample pix\\img.jpg";
        result = result.replace(/D:\\/i, "http://192.000.0.00/VDrive/");
        result = result.replace(/\\/g, "/");
        $("body").append("&lt;p id='lFilename'&gt;&lt;img src='" + result + "'/&gt;" + c + "&lt;/p&gt;");
        $("#lFilename").css("top", (e.pageY - xOffset) + "px")
                       .css("left", (e.pageX + yOffset) + "px")
                       .fadeIn("fast");
    },
    function() {
        this.title = this.t;
        $("#lFilename").remove();
    });
    $(".lFilename").mousemove(function(e) {
        $("#lFilename").css("top", (e.pageY - xOffset) + "px")
                       .css("left", (e.pageX + yOffset) + "px");
    });
};

$(document).ready(function(){
    screenshotPreview();
});
</code></pre>

<p>and this works properly, but of course showing the same image all the time.</p>

<p>I want to know if I'm doing the right thing (well, I believe no since it's not working). I have a feeling that this code <code>var result = $("#grdlinkFilename").data("id");</code> inside the js file is nor returning any value.</p>

<p>I know there are more people out there that are more experience in this kind of scenario and with wider knowledge in handling asp.net, c#, javascript or jquery.</p>

<p>Please help me with this. I already did research and ask other experts from different sites but still no one's able to help me.</p>
