Tenho uma imagem SVG com os Estados do País e preciso que, ao passar o mouse sobre um Estado, a imagem com o nome do Estado apareça e siga o mouse.
Já fiz a imagem aparecer e desaparecer com os eventos mouseenter
e mouseleave
, porém, não consigo fazer ela seguir o mouse dentro do Estado com mousemove
.
Segue o código:
$('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");
});
img
).