Overlaying tooltip style data on an SVG world map I've got an SVG map of the world (based on a public domain file from wikipedia), with generated CSS to highlight individual countries.
I need to a add mouseover tooltips containing additional data about each country, the data will be provided by PHP.
I'm an experienced web programmer, but have never worked with SVG until now. What is the best approach to display a text tooltip under the user's mouse, with info about the specific SVG node under the mouse cursor?
Note this SVG is full of nice id and class attributes designed to facilitate this kind of use.
I need this to be as cross browser as practical, but am happy to disable the feature for some browsers (old versions of Internet Explorer).

*

*Detect the mouseover event

*Access the title information

*Create-or-show a group of title elements

*

*Append them to the end of the SVG document so that they draw above all other content


*Populate the elements with the appropriate data based on title

*Position the elements accordingly

*

*You'll want to transform the cursor point from screen space to SVG space, or calculate the bounding box of your source element and transform that from possibly-transformed object space to global SVG space.


*Detect the mouseout event

*Hide-or-destroy the title elements.


Is there any part of the above that you cannot do?

Edit: Answering the wealth of questions from the comment below:


*

*You can place your script inside the SVG or outside in an embedding HTML; if they are self-contained to the SVG (as yours would be) it's better to place them here, so that you can embed your SVG externally and have it still work.

*Finding a list of anything is easiest of you place a common class="foo" attribute on them, via one of:
var foos = document.querySelectorAll('.foo');
var foos = document.getElementsByClassName('foo');

Or you can query based on structure; for example, if every country is a <path> contained within a <g id="countries"> then you can use:
var countries = document.querySelectorAll('#countries path');

But if all you have is an array of IDs, then you'll need to do something like:
var countryIDs = [ "usa", "brazil", … ];

// Old school
var countries = [];
for (var i=countryIDs.length; i--; ){
  countries[i]=document.getElementById(countryIDs[i]);
}

// New school
var countries = countryIDs.map(function(id){
  return document.getElementById(id);
});


*To attach an event handler to each:
function showTooltip(evt){
  var element = evt.target;
  // your code here
}

countries.forEach(function(el){
  el.addEventListener('mouseover',showTooltip,false);
});

Alternatively, you can just attach the event handler to a common ancestor once, and handle it there:
svg.addEventListener('mouseover',function(evt){
  var element = evt.target;
  if (element.hasAttribute('title')){
    // your code here
  }
}


*The <script> is easiest when placed right before the </svg>, but you can put it at the top if you want and it only do its work when the file is done loading, for example:
window.addEventListener('load',function(){
  // Put all your code here
},false);


*It's easy to find information on embedding SVG, and you are right, there are many ways to do it. Here's one nice article about it. I personally advocate either SVG in XHTML or, if you must, SVG in HTML5.

You can use append svg title to view additional data.
// Here we add an SVG title element the contents of which is effectively rendered in a tooltip   
.append("svg:title")
.text(function(d) {return "Name:"+d.Name;}); 
We can use this tooltip along with all svg element. Here d is a json object form this we are parsing the data.  

https://gist.github.com/ilyabo/1339996