title: Pop-up window Over SVG Map on-hover or on-click
body: <p><strong>See Update below</strong></p>
  
  <p>I'm trying to code an interactive map of California by county. When a user hovers or clicks (I haven't decided which yet) over a county, a tooltip or pop-up window will appear with data specific to that county.</p>
  
  <p>I'm working with an inline SVG file I found on Wikipedia here: <a href="http://stevedillon.net/WNM/661/7_1/index.html" rel="nofollow">Map of California by County</a></p>
  
  <p>Each 'polyline' represents a county and has an id (e.g. id="_x30_01_Alameda"). Is there a way to code the xml to specify an event to fire on hover or on click for that id?</p>
  
  <p>Oviously, I haven't worked with SVG's much. Is there a better way to create an interactive map by county?</p>
  
  <p>Here is an example of the code I'm looking to modify. I've added classes to the 'polyline' element of 'county animate', now I'm just trying to figure out how to add a popup window with specific information for each county on hover:</p>
  
  <p><strong>Update</strong></p>
  
  <p>So I added the title "Hello World" inside the polyline so now the tooltip appears when user hovers over that specific county. Any suggestions on how to have the tooltip appear directly over each county? Can that only be done with CSS and absolute positioning? If so, it sounds like a nightmare. </p>
  
  <p>Thanks for any help!</p>
  
  <pre><code>    &lt;script&gt;
  
    $( function() {
      $( document ).tooltip();
    } );
  
  &lt;/script&gt;
  
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  --&gt;
          &lt;svg width="620.843px" height="733.026px"&gt;
  
      &lt;defs id="defs1051"&gt;
          &lt;inkscape:perspective sodipodi:type="inkscape:persp3d" inkscape:vp_x="0 : 366.513 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_z="620.84302 : 366.513 : 1" inkscape:persp3d-origin="310.42151 : 244.342 : 1" id="perspective1055" /&gt;
      &lt;/defs&gt;
  
          &lt;polyline  class="county animate" id="_x30_01_Alameda" title="Hello World" fill="#ffffff" stroke="#979899" stroke-miterlimit="1" points="160.354,327.507 160.446,327.867     160.371,329.095 160.464,329.46 160.166,329.92 160.457,331.061 160.097,331.152 160.188,331.512 160.38,332.262 160.186,333.111     160.278,333.471 160.37,333.831 160.028,335.516 160.221,336.271 160.136,339.068 159.954,341.485 159.972,343.079     160.154,345.402 159.98,346.24 160.071,348.205 159.803,348.656 160.262,348.954 160.354,349.314 160.445,349.674     160.831,349.576 161.679,349.776 161.771,350.136 162.136,350.042 162.984,350.243 163.343,350.151 163.435,350.51     163.075,350.602 163.168,350.967 163.528,350.875 163.626,351.261 163.36,351.718 163.817,352.011 164.208,351.912 164.3,352.277     164.66,352.186 164.752,352.545 164.85,352.93 165.214,352.837 164.67,353.786 142.229,352.752 140.756,353.128 140.847,353.487     140.462,353.585 140.562,353.975 140.197,354.068 140.098,353.678 139.713,353.777 139.812,354.167 137.955,354.64 138.046,355     137.682,355.093 137.59,354.733 137.23,354.825 137.131,354.435 136.741,354.534 136.65,354.174 136.55,353.784 136.19,353.875     136.29,354.266 134.791,354.648 132.941,353.521 130.886,353.246 130.125,351.869 129.093,350.95 128.734,351.042     127.886,350.846 126.669,347.599 125.157,344.793 124.671,341.364 124.847,338.923 123.34,336.143 122.24,334.852     121.002,334.757 120.81,334.002 119.903,333.466 120.167,332.982 120.076,332.623 121.667,332.601 121.934,332.149     121.475,331.851 117.911,330.394 114.947,329.551 114.473,327.691 114.913,326.391 116.222,325.264 116.396,324.448     116.403,322.847 116.02,321.347 115.447,320.726 115.348,320.336 115.737,320.236 116.097,320.145 116.482,320.047     116.582,320.437 116.946,320.344 117.305,320.252 117.206,319.862 117.596,319.763 117.956,319.671 118.055,320.061     118.445,319.961 118.537,320.322 118.628,320.682 118.988,320.59 119.087,320.981 119.179,321.34 119.278,321.73 119.643,321.638     120.027,321.54 120.119,321.9 120.484,321.807 120.576,322.167 121.06,322.459 121.152,322.824 120.769,322.922 120.958,323.667     121.343,323.569 121.436,323.935 121.801,323.842 121.9,324.231 121.991,324.586 122.09,324.977 122.449,324.886 122.541,325.246     122.926,325.147 123.019,325.513 122.634,325.611 122.732,325.996 122.825,326.361 122.923,326.746 123.309,326.648     123.401,327.013 123.766,326.92 124.515,326.729 124.971,326.996 125.071,327.387 125.163,327.747 125.548,327.648     125.647,328.039 126.007,327.948 126.842,328.118 127.207,328.025 127.597,327.925 128.433,328.095 128.797,328.002     129.646,328.202 130.099,328.476 130.849,328.285 131.403,328.937 131.787,328.838 131.879,329.199 132.344,329.496     132.819,329.757 133.462,330.777 133.926,331.074 132.911,331.722 133.101,332.466 133.678,333.125 134.037,333.033     134.129,333.393 134.591,333.685 134.977,333.586 135.07,333.952 135.434,333.859 136.009,334.506 146.778,331.762     148.537,330.902 157.833,328.533 157.741,328.173 160.354,327.507   "  /&gt;
  </code></pre>