Question

I have a graph in SVG format, and I wanted to implement a functionality that changes the title property of any node when the mouse pointer hovers over it, and back to the old title when the pointer moves away. To implement this, I’m trying to use the jQuery library and my code looks like this:

var oldTitle;
$(document).ready(function() {
    $("g[class=node]").hover(funciton() {
        oldTitle = $(this).prop("title");
        $(this).prop("title", "New Title!");
    }, function() {
        $(this).prop("title", oldTitle);
        }
    );
});

However, for some reason the code is not functioning and I cannot see the expected effect. Any ideas as to what is going wrong here?

EDIT: I think I have an idea of what the problem is, but am still looking for a solution to it. So, in the vector graphics html code, a node is represented as:

<g id="node2" class="node"><title>SomeTitle</title>
        <ellipse fill="forestgreen" stroke="forestgreen" cx="243.017" cy="-678" rx="27" ry="18"/>
        <text text-anchor="middle" x="243.017" y="-674.3" font-family="Times New Roman,serif" font-size="14.00">b</text>
</g>

Now, I want the hover action to change the text between <title> ... </title> and change it back when the mouse pointer moves away.

Any help on how this can be acheived?

PS: $(this).prop(“title”) returns undefined, so title out here is not a property of the node element…. then, what is it? And how can it be changed?

Thanks a lot!

Answer 1

this may work

var oldTitle;
    $(document).ready(function() {
        $("g[class=node]").hover(function() {
            oldTitle = $(this).attr("title");
            $(this).attr("title", "New Title!");
        }, function() {
            $(this).attr("title", oldTitle);
            }
        );
    });

This code will work In the case that when you have something like that

 <g id="node2" class="node" title="SomeTitle" >
            <ellipse fill="forestgreen" stroke="forestgreen" cx="243.017" cy="-678" rx="27" ry="18"/>
            <text text-anchor="middle" x="243.017" y="-674.3" font-family="Times New Roman,serif" font-size="14.00">b</text>
    </g>

But you are using <title></title>
than use

var oldTitle;
        $(document).ready(function() {
            $("g[class=node]").hover(function() {
                oldTitle = $(this).find("title").text();
                $(this).find("title").html("New Title!");
            }, function() {
                $(this).find("title").html(oldTitle);
                }
            );
        });