Home/ Questions/Q 8655883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T15:08:52+00:00

I am new to all this stuff. I need to create a map using

  • 0

I am new to all this stuff. I need to create a map using SVG on Europe Financial Status. I got all the data. The map is working fine now. I am even able to show country specific data like population, GDP and all in a box at one side of a map.

However, I need to show this data as a Tool Tip when user will move or hover mouse on a specific country.
It would be like, show data on mouse hover and hide it on mouse out event for each country. Some part of my code is below.

 <title id="title">Countries of Europe</title>
 <defs><script>
      <![CDATA[

    var country = []; 

    country[0]=["Abbreviation","Name","GDP","Population","Eurozone","Public Debit","Unemployment","Rating"];
    country[117]=["fi","Finland",239,5302545,"yes",48.6,7.6,"AAA"];
    country[118]=["de","Germany",3315,82217800,"yes",81.2,5.6,"AAA"];

    function myShowValues(myEvent)
    {
       var myScrId = myEvent.target.getAttribute('id').replace(/c/,'1'); 
       document.getElementById('myLegCantName').firstChild.data = '' + country[myScrId][1]+ '' ;    
       document.getElementById('gdp').firstChild.data='GDP: ' + country[myScrId][2]+' Billions of $US';
       document.getElementById('unem').firstChild.data='Unemployment: ' + country[myScrId][6]+' %';
       document.getElementById('sp').firstChild.data='S & P rating: ' + country[myScrId][7]+' ';
       document.getElementById('pd').firstChild.data='Public debt: ' + country[myScrId][5]+' % of GDP';
    }

    function changeopa(evt)
    {
       evt.target.setAttribute("opacity", "0.5")
       myShowValues(evt); 
    } 

    function info(evt)
    {
       var box= evt.target;
    }

    ]]>
</script></defs>

Then I am using these functions below like,

<rect id="ocean" x="-371.388" y="-44.213" fill="aliceblue" width="1222.493" height="783.168">
</rect>

<!-- EU Countries Below - arranged in alphabetical order -->

<!-- ISO-3116-1-ALPHA2 code - .de (Germany) -->
<path id="118" fill="#00CC00" stroke="#FFFFFF" stroke-width="0.7" 
onmouseover="changeopa(evt)"
onmouseout="evt.target.setAttribute('opacity', '1.0');"
d="M319.59,396.925c0.283,2.263,2.547,6.647,2.829,8.063  c0.425,3.395-4.102,5.658-3.111,8.346c0.565,1.697,5.94,2.404,5.94,4.526c0,2.121-1.697,2.829-0.424,4.385  c0.424,0.707,1.414,0.99,1.697,1.839c0.424,0.707-0.142,1.697,0,2.404c0.142,0.425,0.707,0.283,0.849,0.566  c0.707,0.99-0.99,3.395-1.415,4.243c-0.849,1.273,1.273,1.98,1.697,3.254c0.283,0.707-0.707,1.556-0.282,2.121  c0.565,0.849,1.839,0.566,2.404,1.132c1.98,1.839,1.132,12.165-0.565,12.448c-1.839,0.424-4.81-7.355-6.365-2.971  c-0.283,0.707,2.263,1.272,1.697,1.697c-1.697,1.414-4.102,1.556-5.8,2.546c-0.282,0.142,0,0.849-0.282,0.99  c-1.132,0.565-2.688-0.283-3.537,0.425c-0.707,0.565-0.424,1.697-1.131,2.263c-0.283,0.283-0.566-0.707-0.99-0.565  c-1.273,0.282-1.415,1.98-2.264,2.546c-0.424,0.425-1.273-0.283-1.697,0.142c-0.424,0.283,0,1.132-0.424,1.556  c-0.566,0.707-2.122-0.565-2.547-0.565c-3.536,0.565-4.102,3.253-5.233,5.517c-0.283,0.565-0.283-1.415-0.849-1.839  c-0.424-0.566-1.273-0.707-1.98-0.849c-1.273-0.283,1.414,4.243,4.244,6.082c0.282,0.142,1.272,0.283,1.414,1.132  c0.424,1.98-1.414,1.272-1.697,2.829c-0.142,0.424,2.971,5.657,3.395,6.082c2.404,2.404,2.971,0.707,4.526,2.264  c0.99,0.989,1.132,2.546,2.122,3.395c2.264,1.556,8.346,3.678,8.204,7.355c-0.142,3.819-0.99,2.971-3.961,2.263  c-0.282,0-0.565,0.142-0.707,0.425c-0.283,1.414,0.565,2.971-0.849,4.103c-1.273,0.989-7.214,2.404-7.355,4.667  c0,0,3.395,4.668,3.395,4.81c0.142,0.142-1.839,1.839-1.131,2.404c1.556,1.415,3.111-0.707,1.838,3.961  c0,0.283-0.282,0.707-0.565,0.707c-4.526-1.272-0.99-3.536-3.112-3.678c-1.131,0-2.121,0.99-3.253,0.85  c-0.565-0.142-0.425-1.132-0.849-1.273c-0.849-0.283-1.697,0.424-2.404,0.142c-0.283-0.142,0.282-0.99,0-0.99  c-1.697,0.142-0.142,2.404-0.566,2.546c-1.98,0.565-5.233-0.283-7.072,0.425c-0.566,0.282-0.283,1.272-0.849,1.556  c-0.565,0.424-1.273-0.283-1.839,0.142c-0.425,0.142,0.142,0.849-0.142,1.132c-0.142,0.141-4.951,1.414-5.517,1.131  c-0.283-0.282,0-0.99-0.283-1.272c-0.141-0.283-0.849-0.283-0.99-0.566c-0.141-0.282,0.707-0.142,0.566-0.424  c-0.566-1.839-4.526,0.424-5.658-0.849c0,0,0.283-0.142,0.283-0.283c-0.85-0.565,0,1.839-0.283,2.829  c0,0.565-2.688,3.819-3.678,2.829c-0.566-0.566,0.99-1.415,0.565-1.98c-0.142-0.142-0.565,0.425-0.849,0.425  s-0.707-0.142-0.849-0.425c-0.282-0.425,0.707-0.99,0-1.556c-0.565-0.425-0.849-1.132-1.414-1.415  c-0.425-0.283-0.99,0.425-1.556,0.283c-0.283-0.283,0-0.99-0.283-1.273c-0.707-0.565-0.566,1.98-2.829,1.273  c-1.556-0.566-2.546-2.122-4.103-2.546c-0.142,0-4.809,0.282-4.809,0.282c-0.566-0.282-0.566-1.272-1.132-1.556  c-0.142-0.283,0.282,0.707,0,0.849c-0.283,0.142-0.849,0-0.99-0.283c-0.142-0.424,0.565-0.99,0.282-1.272  c-2.121-2.122-4.525,1.697-4.102,1.839c0.849,0.142,1.697-0.142,2.546,0c0.565,0.142-0.99,0.283-1.414,0.565  c-0.283,0.142,0.142,0.849,0,0.99c-3.536,1.839-0.99-0.849-3.819-0.707c-0.425,0-6.932,1.556-7.355,0.707  c-0.142-0.283,0.849-0.424,0.707-0.565c-1.273-0.99-1.839,3.253-1.839-1.697c-0.142-1.98,1.273-3.819,1.415-5.8  c0-0.283-0.566-0.283-0.566-0.707c-0.142-0.708,0.142-1.415,0.425-2.122l1.979-3.253c0.143-0.849,0.283-3.961,0.708-4.951  c1.132-2.264,3.96-3.961,5.517-6.648c0.565-0.99-7.922-1.98-8.487-2.404c-0.425-0.425-0.142-1.273-0.565-1.697  c-0.707-0.566-5.234,1.272-5.517,0.849c-0.142-0.425,0.424-0.99,0.142-1.273c-4.244-3.819-1.415,1.98-3.112,0.142  c-1.415-1.415-2.122-4.668-3.253-5.375c-0.425-0.425-1.273,0-1.557-0.425c-1.556-2.829,4.103-3.96,2.122-6.365  c-0.283-0.424-3.678-0.707-4.386-3.678c-1.272-5.233,5.234-4.95,3.254-8.204c-0.424-0.707-1.697-0.565-1.98-1.414  c-0.142-0.566,0.99-1.132,0.849-1.697c0-0.425-0.849,0.141-1.132-0.142c-0.141-0.142-2.121-3.112-1.979-3.536  c0.142-0.566,1.132-0.566,1.272-1.132c0.425-2.405-3.678-3.254-2.404-3.536c0.424-0.142,0.707,0.424,0.99,0.424l2.688-2.404  c0.142-0.707-1.697,0.142-1.132-0.99c0.425-0.99,1.415-1.697,1.839-2.688c1.273-3.112-1.839-5.375-2.688-6.932  c-0.142-0.282,0.142-0.707,0.283-0.99c0-0.282-0.283-0.707,0-0.849c0.707-0.424,1.556,0,2.404-0.282c0.283-0.142-0.283-0.99,0-0.849  c0.849,0.282,1.415,1.272,2.404,1.272c0.99,0.142,4.81-1.132,5.234-2.122c0.424-0.989-2.688-1.131-1.414-1.979  c2.263-1.557,4.95-2.122,4.385-5.658c-0.142-1.98-5.375-1.132-4.103-3.254c0.142-0.424,0.849,0,0.849-0.282  c0.142-0.425-0.565-0.849-0.424-1.273c0-0.283,0.424-0.283,0.707-0.283c0.99,0,1.839,0.425,2.829,0.425  c1.132,0,0.142-2.264,0.565-3.395c0.283-0.99,2.688-5.517,2.404-7.922c0.425-0.142,0.85-0.424,1.273-0.99  c0.566-0.565-0.707-0.282-1.98-0.282l0,0c-0.283-0.283-0.707-0.142-0.99-0.142c-0.282,0-0.424-0.142-0.565-0.283  c-1.132-1.414,1.98-5.8,3.112-6.365c0.707-0.424,1.556,0.425,2.263,0.425c10.608-0.425-11.033-1.273,5.093-0.849  c0.141,0,0.565,0.141,0.707,0.282c0.849,1.557,1.414,8.063,4.951,6.648c1.131-0.425-1.132-10.185,2.121-10.185  c0.283,0,0.283,0.849,0.707,0.99c0.425,0.283,1.132,0.283,1.697,0.283c1.415,0.282,2.971-1.132,4.244-0.566  c0.99,0.425,0.99,1.839,1.556,2.688c0.708,1.132,4.526,8.346,4.526,3.536c0-0.989-2.121-0.707-2.971-1.556  c-1.414-1.272-1.131-4.526-3.818-4.95c-0.425,0-3.678,0.707-3.396-1.273c0.142-1.273,2.122-5.233,0.849-6.79  c-0.424-0.424-3.536,1.132-3.96-0.424c-0.142-0.283,0.849,0,0.989-0.283c0.283-0.283-0.989-0.849-0.707-0.849  c1.415-0.424,3.819,0.99,4.244-1.839c0-0.283-3.254-3.819-3.537-4.385c-0.424-0.99-0.565-2.122-0.565-3.112  c0.99,0.142,2.688,0,3.112,0c1.839,0.283,3.678,1.273,5.517,1.557c-0.142,0.424-0.142,0.565,0.142,0.424  c0.565-0.424,0.849-1.132,1.414-1.273c0.283,0-0.142,0.708,0,0.99c0.425,0.283,0.99,0.142,1.414,0.283  c0.99,0.142,1.98,0.142,2.688,0.566c0.424,0.282,0.565,0.849,0.565,1.272c0,0.142-0.283,0-0.283,0  c-0.282,0.142-0.849,0.425-0.565,0.565c0.142,0.283,0.849-0.282,0.99,0c0.425,0.708,0.282,1.557,0,2.264  c-0.283,0.707-2.263,1.132-1.697,1.839c0.707,0.99,3.395-1.556,3.536-0.283c0.142,0.849-1.414,2.405-0.566,2.688  c0.99,0.425,0.99-1.979,1.98-2.121c0.85-0.142,4.103,2.688,4.81,2.404c0.142,0,2.971-3.253,3.961-1.556  c1.98,3.678-7.921,7.497-2.546,8.063c1.131,0.142,1.98-1.273,3.111-1.273c1.415,0.142-0.142,4.244,2.971,2.122  c0.707-0.425,1.132-3.961,2.404-4.668c1.839-0.99,3.819-1.414,4.668,0.566c-0.141-0.425-0.283-1.132-0.141-1.273  c0.848-0.99,1.979-1.415,2.688-2.264c0.848-0.99,0.99-2.546,1.838-3.536c0.283-0.282,2.122,0.425,3.819,0.99  c0.708-0.142,1.415-0.283,1.698-0.283c0.99,0,0.424,1.98,0.99,2.829c0.424,0.566,1.414,0.283,1.838,0.849  c0.85,0.708,1.273,2.688,2.547,2.547c0.99,0,2.121-0.708,3.253-0.425c0.425,0.142-0.565,0.849-0.565,1.273  c0.141,1.132,0.565,2.263,0.99,3.395c0.424,1.132,1.838,1.556,2.971,1.98C318.6,396.925,319.167,397.065,319.59,396.925z   M306.719,386.032c0.282-1.272-0.283-2.828,0.141-4.102c0.425-1.273,4.668,2.404,3.819,1.132c-0.565-0.849-2.404-0.425-2.829-1.415  c-0.142-0.849,1.132-1.556,1.697-2.263c0.566-0.425-0.424,1.697,0.142,1.839c0.99,0.282,1.98-0.142,2.829,0.142  c0.849,0.282-1.132,1.414-0.849,2.263c0.283,0.99,1.556,1.132,1.98,2.122c0.282,0.282-1.556,1.697-3.819,2.263  C308.699,388.438,307.708,386.74,306.719,386.032z"/>

In the end;

<rect x="100" y="55" rx="20" ry="20" width="175" height="120"
style="fill:none;stroke:black;stroke-width:2;opacity:0.5"/>

<text id="myLegCantName" x="160" y="80" font-size="16" font-family="'DejaVuSansCondensed-Bold'" fill="#646464">
</text>
<text id="gdp" x="110" y="100" font-size="14" font-family="'DejaVuSansCondensed-Bold'" fill="#646464" >
</text>
<text id="unem" x="110" y="120" font-size="14" font-family="'DejaVuSansCondensed-Bold'" fill="#646464" >
</text>
<text id="sp" x="110" y="140" font-size="14" font-family="'DejaVuSansCondensed-Bold'" fill="#646464" >
</text>
<text id="pd" x="110" y="160" font-size="14" font-family="'DejaVuSansCondensed-Bold'" fill="#646464" >
</text>

<path id="boximage" x="78" y="100" />

My problem is, I have no connection with any scripting before. Please help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve written a tutorial on how to add tooltips to SVG here: http://petercollingridge.co.uk/interactive-svg-components/tooltip

    • 0