title: Why is this site having trouble registering click events?
body: <p>I have a map made with d3 that has title that I want to display as hover over tool tip. It correctly handles mouse click events for panning and zooming. However, it does not handle mouse overs for tools tips.</p>
  
  <p>My HTML looks like this: </p>
  
  <pre><code>&lt;div id="mapwrapper"&gt;
      &lt;div id="map"&gt;
          &lt;svg width...&gt;
  </code></pre>
  
  <p>If I set a jquery handler for any mouse event (click/mouseover) it will fire for map wrapper or map, but not for anything in the SVG. </p>
  
  <pre><code>$("#mapwrapper").on("mouseover", function() { //same for click events...
      alert("mapwrapper"); //fires
  });
  $("#map").on("mouseover", function() {
      alert("map");  //fires
  }); 
  $("svg").on("mouseover", function() {
      alert("map");   //does not fire
  });
  </code></pre>
  
  <p>I've tried several methods of displaying tooltips and they don't work. I've also tried to setup a simple jquery mouseover alert (just displaying a popup when you run your mouse over an SVG element with a certain class) and that doesn't work. So clearly something is messing up the mouseover events on the SVG on the site. I know d3 has "events" -- although I don't know much about how they work.  </p>
  
  <p><strong>Interestingly, if I copy and paste the HTML into a new document and then load that document the SVG with register click events</strong> </p>
  
  <p><strong>I have set the <a href="http://www.w3.org/TR/SVG11/interact.html#PointerEvents" rel="nofollow">pointer events</a> property on the SVG to visible and get the same behavior</strong></p>
  
  <p>How do I debug this problem? </p>