Problem in SVG image. Event mouseenter(), Mousemove() and mouseleave()

Question

I have a SVG image with the States of the Country and I need that when passing the mouse over a State, the image with the name of the State appears and follow the mouse.

I’ve already made the image appear and disappear with events mouseenter and mouseleave, however, I can’t make her follow the mouse inside the state with mousemove.

Follows the code:

$('path.str0').mouseenter(function(){
            var thisClass = $(this).attr('class');
            var pieces = thisClass.split(' ');

            //Estou mexendo aqui. Ewerton Melo
            $('img').filter( '.' + pieces[2]).css("display", "block");
            //Até aqui

            $(this).attr('fill', "#00d4ff");
        }).mousemove(function(e){
            var mousex = e.pageX + 20; //Get X coodrinates
            var mousey = e.pageY + 20; //Get Y coordinates
            var tipWidth = $(this).width(); //Find width of tooltip
            var tipHeight = $(this).height(); //Find height of tooltip

            //Distance of element from the right edge of viewport
            var tipVisX = $(window).width() - (mousex + tipWidth);
            //Distance of element from the bottom of viewport
            var tipVisY = $(window).height() - (mousey + tipHeight);

            if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
                mousex = e.pageX - tipWidth - 20;
            } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
                mousey = e.pageY - tipHeight - 20;
            }
            //Absolute position the tooltip according to mouse position
            $(this).css({  top: mousey, left: mousex });
        }).mouseleave(function(){
            var thisClass = $(this).attr('class');
            var pieces = thisClass.split(' ');
            //console.log($('img').filter( '.' + pieces[2]).css("display", "none"));
            $('img').filter( '.' + pieces[2]).css("display", "none");
            $(this).attr('fill', "#00b2d6");
        });

Answer 1

Since you didn’t include CSS or HTML, I’ll assume that SVG is any image, and you don’t have a predefined CSS.

By your Javascript, you also have an image img.

$('img').filter( ... );

I created a simple SVG (a circle) that represents the SVG you are using:

<svg viewBox="0 0 200 200" width="200" height="200">
    <circle class="a b c" r="100" cx="100" cy="100" fill="red" />
</svg>

and changed the reference path.str0 of your code by him for this example:

$('circle').mouseenter(function(){
   var thisClass = $(this).attr('class');
   var pieces = thisClass.split(' ');

I also created an image, a <img> and put three arbitrary classes a, b and c in SVG, as your code attempts to extract the third class from svg to refer to img:

$('img').filter( '.' + pieces[2]).css("display", "block");

Apparently everything is working correctly (the SVG changes color in the mouseover and mouseout, the image disappears, and the coordinates change during the mousemove. I include a DIV to monitor the change of coordinates of the mousemove:

$('#coords').html('y: '+mousey+', x: '+mousex); 

The coordinate change is happening, but the positioning type has not been defined (I’m assuming you didn’t set this in CSS). Therefore, it is not an SVG error, but CSS. To position in CSS you need to define position beyond the coordinates (top,left,bottom or right). It will work if you add a CSS with:

img {
    position: absolute;
}

Look at this Jsfiddle an attempt to reproduce your problem and solution. I think you will be able to adapt it to your problem.