JSFiddle - React, Tailwind, and code Playground
HTML
<svg width=500px height=400px>
<image id=img1 data-type="img1" xlink:href=/favicon.png x=10 y=10 height=20 width=20 class="img1" />
</svg>
<div id="div_legend" style="visibility:hidden; position:absolute; opacity: 0;" >demo</div>
JavaScript
var svg = document.querySelector('svg');
var shape = document.createElementNS("http://www.w3.org/2000/svg", "image");
svg.appendChild(shape);
var ddData = {
element: null,
initialX: 0,
initialY: 0,
originalX: 0,
originalY: 0,
finalX: 0,
finalY: 0,
contadorElementos: 1,
movidos: {},
index: 0
};
svg.addEventListener('mouseover', mouseover); //souris sur le object poubelle
function mouseover(e) {
var div_title = document.getElementById('div_legend');
if (e.target.id == "img1"){
document.getElementById(e.target.id).setAttribute("height", "28px");
document.getElementById(e.target.id).setAttribute("width", "28px");
document.getElementById('div_legend').style.visibility="visible";
var x = e.clientX, y = e.clientY; //souris
document.getElementById('div_legend').style.top = y + 'px';
document.getElementById('div_legend').style.left = x + 'px';
div_title.style.padding = "2px 0";
div_title.style.borderRadius = "7px"; //border coins div
div_title.style.color = "#fff";
div_title.style.backgroundColor = 'black';
div_title.style.width = "100px";
div_title.style.height = "20px";
div_title.style.textAlign = "center";
//div_title.style.transition = "opacity 1s";
div_title.style.boxShadow = "5px 5px 5px #aaa"; //sombre
div_title.style.transition = 'opacity 1s';
div_title.style.webkitTransition = 'opacity 1s';
div_title.style.MozTransition = 'opacity 1s';
div_title.style.opacity = "1";
}
};
svg.addEventListener('mouseout', mouseout);
function mouseout(e) {
var div_title = document.getElementById('div_legend');
if (e.target.id == "img1"){
document.getElementById(e.target.id).setAttribute("height", "20px");
document.getElementById(e.target.id).setAttribute("width", "20px");
div_title.style.visibility="hidden";
div_title.style.opacity = "0";
}
}