title: d3.js PopUp window with mouseout and mouseover
body: <p>I have created a Popup functionality in a GeoMap by using d3.js. The following part of codes shows the specific node as a circle when I move mouse over the circle, it will be shown a Popup window.</p>
  <pre><code>g2.selectAll(&quot;.details&quot;)
  .data(d3.entries(json1))
  .enter()
  .append(&quot;circle&quot;)
  .attr(&quot;r&quot;,0.5)
  .attr(&quot;transform&quot;,function(d) { return &quot;translate(&quot;+ projection([
      d.value.lon,
      d.value.lat
  ]) + ')'; })
  .attr(&quot;fill&quot;,&quot;white&quot;)
  .attr(&quot;stroke&quot;,&quot;steelblue&quot;)
  .on(&quot;mouseover&quot;, function(d) {
      div.transition()
         .duration(500)
         .style(&quot;opacity&quot;, .9);
      div .html(
          '&lt;a href= &quot;' + d.value.url + '&quot;&gt;' + //with a link
            d.value.name +&quot;&lt;/a&gt;&quot; + &quot;&lt;br/&gt;&quot; + d.value.status)
          .style(&quot;left&quot;, (d3.event.pageX) + &quot;px&quot;)
          .style(&quot;top&quot;, (d3.event.pageY - 30) + &quot;px&quot;);
  })
  </code></pre>
  <p>As you can see, the <strong>mouseover</strong> function is working. But when I zoom in or drag the map, it will exist some bugs like this:</p>
  <p><a href="https://i.stack.imgur.com/KMWsT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KMWsT.png" alt="failure" /></a></p>
  <p>You can see the Popup window always locates in the same position(I believe the reason is that the location is specific, not dynamically change when I drag the map).</p>
  <p>Now, I am wondering, how can I create a <strong>mouseout</strong> functionality, in order to remove the Popup window when I put the mouse outside the circle(node)?</p>
  <p>Or is there some way to fix the bugs in the <strong>mouseover</strong> functionality?</p>
  <p>Thanks for your help.</p>