Data from XML into imagemapster tooltip

[Tomtenisse]

I am working on a project involving JavaScript, since I am a flash developer and have worked mainly with ActionScript and HTML/CSS, unfortunately I am VERY new to javascript, so I´m begging for forgiveness already in case this question seems stupid.

On the site I´m working on, the user will be able to hover over different apartments and see price, etc in tooltip boxes next to every area.

I am using jquery+imagemapster for this, where every apartment is an area on the map, and so far it works great. The problem is that the client wants to be able to change the information displayed in the tooltip of each apartment via an XML document.

I am using w3schools example on http://www.w3schools.com/xml/tryit.a...yxml_app_first to get the XML data, and it works on a div but I´m having trouble getting it to show the content INSIDE the tooltip. Having trouble finding information on this, so if there´s an easy way to do this I would be really teful!

My javascript looks like this:

  var image = $('#apartments1');
            image.mapster({
            clickNavigate: true,
            mapKey: 'data-key',
            listKey: 'data-key',
            fillOpacity: 0.5,
            fillColor: '000000',
            stroke: false,
            isSelectable: false,
            singleSelect: false,
            showToolTip: true,
            toolTipClose: ["area-mouseout"],   
            clickNavigate: true,

areas:[
        {   key: "apart1", toolTip: $('<div class="tooltip">Insert XML here</div>')},
        {   key: "apart2", toolTip: "apart2" },