title: How can I bind d3 map tooltips to Leaflet's popupPane?
body: <p>I've got an adaptation of <a href="http://sztanko.github.io/crosslet/" rel="nofollow noreferrer">Crosslet</a> that sets a few map layers on top of one another:</p>
  <ul>
  <li>Layer 1: Satellite Imagery tiles (In leaflet-tile-pane)</li>
  <li>Layer 2: D3-based vector Polygons (In leaflet-overlay-pane)</li>
  <li>Layer 3: Labels/Roads reference tiles (In leaflet-top-pane, added with <a href="https://github.com/wboykinm/geosprocket-labs/blob/master/d3/crosslet/crosslet.js#L1339-L1344" rel="nofollow noreferrer">this method</a>)</li>
  </ul>
  <p><strong><a href="http://wboykinm.github.io/geosprocket-labs/d3/crosslet/#14/40.7346/-74.1663" rel="nofollow noreferrer">Application here</a></strong></p>
  <p><strong><a href="https://github.com/wboykinm/geosprocket-labs/tree/gh-pages/d3/crosslet" rel="nofollow noreferrer">Source here</a></strong></p>
  <p>The problem with this is that the hover tooltips - bound to mouseover of the D3 polygons - are showing up <em>underneath</em> the reference tiles:</p>
  <p><img src="https://i.stack.imgur.com/AC7Tj.png" alt="enter image description here" /></p>
  <p>I've tried changing the z-index of <a href="https://github.com/wboykinm/geosprocket-labs/blob/master/d3/crosslet/less/crosslet.less#L226-L242" rel="nofollow noreferrer">the hover tooltip element</a>, but the elements are sort of trapped within their respective panes. How can I bind the D3-generated popups to the leaflet <a href="http://leafletjs.com/reference.html#map-popuppane" rel="nofollow noreferrer">popup pane</a>?</p>
  <p>Thanks!</p>