Creating a SVG image tooltip - svg

Question

hi guys i need some help i need to create a tooltip with an image inside it however this is for an svg map so i cant use divs like in css and html.I have managed to create an image tooltip .However only one image can appear when i hover on all elements how can i make different images appear for different svg elements ? this is the code i have used for my tooltip:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)" width="380" height="100">
<style>
.caption{
font-size: 14px;
font-family: Georgia, serif;
}
.tooltip{
font-size: 12px;
}
.tooltip_bg{
fill: white;
stroke: black;
stroke-width: 1;
opacity: 0.85;
}
</style>
<script type="text/ecmascript">
<![CDATA[
function init(evt)
{
if ( window.svgDocument == null )
{
svgDocument = evt.target.ownerDocument;
}
tooltip = svgDocument.getElementById('tooltip');
tooltip_bg = svgDocument.getElementById('tooltip_bg');
}
function ShowTooltip(evt, mouseovertext)
{
tooltip.setAttributeNS(null,"x",evt.clientX+11);
tooltip.setAttributeNS(null,"y",evt.clientY+27);
tooltip.setAttributeNS(null,"visibility","visible");
length = tooltip.getComputedTextLength();
tooltip_bg.setAttributeNS(null,"width",length+8);
tooltip_bg.setAttributeNS(null,"x",evt.clientX+8);
tooltip_bg.setAttributeNS(null,"y",evt.clientY+14);
tooltip_bg.setAttributeNS(null,"visibility","visibile");
}
function HideTooltip(evt)
{
tooltip.setAttributeNS(null,"visibility","hidden");
tooltip_bg.setAttributeNS(null,"visibility","hidden");
}
]]>
</script>
<text class="caption" x="10" y="35">Mouseover a square</text>
<text class="caption" x="10" y="50">to display a tooltip</text>
<rect id="rect1" x="160" y="10" width="60" height="60" fill="blue"
onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"/>
<rect id="rect2" x="240" y="10" width="60" height="60" fill="green"
onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"/>
<rect class="tooltip_bg" id="tooltip_bg"
x="0" y="0" rx="4" ry="4"
width="55" height="17" visibility="hidden"/>
<image xlink:href="Blooper-icon.png" class="tooltip" id="tooltip"x="0" y="0"height="50px"width="50px"visibility="hidden"/>
</svg>

Answer 1

in HTML
<div class="svgTooltip"></div>
<svg>
<path class="tempClass" .......>
</path>
</svg>
in CSS
.svgTooltip {
pointer-events: none;
position: absolute;
font-size: 15px;
text-align: center;
background: white;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
z-index: 5;
height: 30px;
line-height: 30px;
margin: 0 auto;
color: #21669e;
border-radius: 5px;
box-shadow: 0 0 0 1px rgb(122, 92, 92);
display: none;
}
.svgTooltip::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 0;
height: 0;
margin-left: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgb(122, 92, 92);
}
.active {
display: block;
}
in JS
$(function() {
$tooltip = $(".svgTooltip");
$(".tempClass").hover(
function() {
$tooltip.addClass("active");
$tooltip.html($(this).attr("title"));
},
function() {
$tooltip.removeClass("active");
}
);
});
$(document).on("mousemove", function(e) {
$tooltip.css({
left: e.pageX - 30,
top: e.pageY - 70
});
});