Raphael JS Tooltip does not show on first hover

Question

Currently I have a arena map created with raphael, each svg element on the map has a tooltip when hovered over. The tooltip does not show on the first hover of an svg element, but it will show if the user enters the svg element again.

I assume it has something to do with my addTip "mouseeneter" function but I am still new with understanding JS so I am not sure. Here is the code I am using for adding the tooltip to the svg element on hover, the code I am using is based off of this stackoverflow forum question and the jsfiddle I have created link

    var tip = $("#tip").hide();
    var tipText = "Tip the Canoe.";
    var over = false;
    function addTip(node, txt) 
    {
        $(node).mouseenter(function(){
            tipText = txt;
            tip.fadeIn();
            over = true;
        })
       .mouseleave(function(){
            tip.fadeOut();
            over = false;
        });
    }

    for (var i = 0, len = rsrGroups.length; i < len; i++) {
        var el = rsrGroups[i];
        el.mouseover(function() {
            addTip(this.node, tipText);
            console.log(node);
            this.toFront();
            this.attr({
                cursor: 'pointer',
                fill: '#990000',
            });
            //alert('test');
        });

        el.mousemove(function(e){
            if (over){
                tip.css("left", e.clientX+20).css("top", e.clientY+20);
                tip.text(tipText);
            }
        });
        el.mouseout(function() {
            this.attr({
                fill: '#003366'
            });
        });
        el.click(function() {
            this.attr({
                fill: 'green'
            });
        });

    }

I actually have the whole thing [right here](http://jsfiddle.net/knottAverage/ArKDp/16/) — user1431083, Jun 11 '12 at 16:13

Andrew · Accepted Answer · 2012-06-11T16:28:00.977

2

You are waiting to add the tooltip until the mouseover fires, just add it before then,

Before:

 for (var i = 0, len = rsrGroups.length; i < len; i++) {
    var el = rsrGroups[i];
    el.mouseover(function() {
        addTip(this.node, tipText);

After:

 function addTip(node, txt) {
    node.mouseover(function(){
        tipText = txt;
        tip.fadeIn();
        over = true;
        }).mouseout(function(){
        tip.fadeOut();
        over = false;
    });
}

 for (var i = 0, len = rsrGroups.length; i < len; i++) {
    var el = rsrGroups[i];
    addTip(el, tipText);
    el.mouseover(function() {

edited Jun 11 '12 at 16:28

answered Jun 11 '12 at 16:11

Andrew

13,757
13
66
84

Thanks for the suggestion, but it didn't solve the issue, in console #tip does not respond when I move that line. – user1431083 Jun 11 '12 at 16:29
@user1431083 Works for me, http://jsfiddle.net/ArKDp/17/ insofar as the original works anyway. – Andrew Jun 11 '12 at 17:39
Ah, didn't notice you changed mouseenter/leave to mouseover/out. Works great now. Thanks for your help! – user1431083 Jun 11 '12 at 18:09
It works when i add But dosnt work when i add – shiba May 19 '14 at 07:31
It works when i add But dosnt work when i add jquery/1.9.1/jquery.min.js Why is it so – shiba May 19 '14 at 07:41

score 0 · Answer 2 · answered Jun 11 '12 at 16:29

I agree with Andrew. The tooltip is not being 'instantiated' until the first el.mouseover.

This is probably the solution, but I'll elaborate with a few tips that may help solve problems like this in the future.

I see you are using alert('test'). This will help you determine if code is being reached or not, but it is not really that good for determining the order of execution (which appears to be the problem here).

Instead use one of two approaches to 'debug' JavaScript. It is a very powerful run-time tool. Here is how:

Programatically: add the JS key word debugger; this will set a breakpoint and stop your code during execution.

el.mouseover(function() { debugger; addTip(this.node, tipText); console.log(node); this.toFront(); this.attr({ cursor: 'pointer', fill: '#990000', });

This may have helped you solve your problem because you would see that this code is only fired after the first mouseover.

HINT: the debugger will not 'stop' at the breakpoint until a step debugger is opened in your browser. For this I recommend Dev Tools in Chrome. All you do is right click on the page and select 'Inspect Element'. This will open a console that gives the buttons play, step-over, step-into. This may be foreign at first, but step-debugging JavaScript is the most important tool you can have to becoming an advanced JS developer. It is very important. :) Refresh the page, mouseover your element and you should see it stop execution at the debugger line of code.

"2." Use Dev Tools to set a breakpoint instead of 'debugger;'. This is more flexible because the breakpoint is set at runtime in the browser, and is not embedded physically in the code.

FireBug for Firefox is also very good. But that will take a little investigation on your part.

Step-Debugging is good for you, try it! Hope this helps. All the best! Nash

thanks for the tip on debugger; call didn't know about that It stopped on the tipText variable. However in the console div#tip does not get populated on hover once I pull it out of the mouseenter function. Am I writing it wrong? for (var i = 0, len = rsrGroups.length; i < len; i++) { var el = rsrGroups[i]; addTip(el, tipText); el.mouseover(function() { this.toFront(); this.attr({ cursor: 'pointer', fill: '#990000', }); }); — user1431083, Jun 11 '12 at 16:57

Raphael JS Tooltip does not show on first hover

2 Answers2