I need help in making my image tooltip work

Question

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.

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.

Here's my code for my external js(jquery) file:

this.screenshotPreview = function() {
    xOffset = 10;
    yOffset = 30;

    $(".lFilename").hover(function(e) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + 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("<p id='lFilename'><img src='" + result + "'/>" + c + "</p>");
        $("#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();
});

And this is my <ASP:LinkButton/> located inside a <ASP:Gridiew/> .

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

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

I tried to do this in my js file as a test:

this.screenshotPreview = function() {
    xOffset = 10;
    yOffset = 30;

    $(".lFilename").hover(function(e) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + 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("<p id='lFilename'><img src='" + result + "'/>" + c + "</p>");
        $("#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();
});

and this works properly, but of course showing the same image all the time.

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 var result = $("#grdlinkFilename").data("id"); inside the js file is nor returning any value.

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.

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.

Answer 1

In your JS file, try to replace the following line:

var result = $("#grdlinkFilename").data("id");

with this one:

var result = $('#' + e.target.id).data("id");