JSFiddle - React, Tailwind, and code Playground

by Helder da Rocha

HTML

<img class="c" src="http://cdn.sstatic.net/br/img/apple-touch-icon.png"/>
<svg viewBox="0 0 200 200" width="200" height="200">
    <circle class="a b c" r="100" cx="100" cy="100" fill="red" />
</svg>

<!-- PARA LER COORDENADAS NO MOUSEMOVE -->
<div id="coords"></div>

CSS

img {
    border: solid black 1px;
    width: 50px; 
    height: 50px;
    display: none;
    position: absolute;
}
svg {
    border: solid 1px red;
}

JavaScript

$('circle').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
    $('img').css({  top: mousey, left: mousex });
    
    // COORDENADAS LIDAS
    $('#coords').html('y: '+mousey+', x: '+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");
});