I have a SVG map on my site. I would like to add div to when the user hover over a respective state, it shows the name of the same.
What happens is that if I include any information within <svg> the styles are lost. It can be div or span above <a> .
My code:
I put it in the JSFiddle because the code exceeds the limit of snippet characters.
You can select the SVG elements normally, as if they were HTML.
I created an example, starting from your example, where it starts with%% of% attribute of% of each state. JSFiddle
I put a <h3> class in all states and put a handler of the event mouseenter .
var estados = $(".estado-svg"), // seciona todos o <a>
teste = $("#teste"); // seleciona o <h3> para printar os estados
/*
poderia ser usado assim:
$(".estado-svg").on("mouseenter", function(){ ... });
Mas usei delegação de eventos por questões de performance
*/
$("#svg-map").on("mouseenter", ".estado-svg", function(){
teste.html($(this).attr('xlink:href')); // Printa no <h3> o attributo xlink:href
});
From this example you can get an idea of how to interact with the elements and use some pop-up library.
EDIT
This Stackoverflow question in English responds your question.