工具提示在带有两个图表的d3.js中消失

我在d3.js中创建了一个带有工具提示的地图，当你将鼠标悬停在它的一部分时，它会显示出来。它运行良好，但当我在另一个div中添加另一个条形图时，地图中的工具提示消失了。barchart工具提示基本相同，但我给了它一个不同的ID。以下是我如何为地图创建第一个工具提示的。

<div id="map">
  <div id="tooltip" class="hidden">
    <p><strong id ="county"></strong></p>
    <p>Avergae <strong id="value"></strong></p>
  </div>
</div>
<div id="barchart">
  <div id="tooltipbar" class="hidden">
    <p>Avergae is <strong id="valuebar"></strong></p>
  </div>
    <div id="bars">
      <h3>Bar Chart</h3>
    </div>
</div> 

CSS是：

 #tooltip {
  position: absolute;
  width: 200px;
  height: auto;
  padding: 10px;
  background-color: white;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
#tooltip.hidden {
    display: none;
}

它在d3代码中用作

var mouseMove = function(d) {
    var x = d3.event.pageX + 5;
    var y = d3.event.pageY + 5;
    if (d.properties.value > 0) {
        d3.select("#tooltip")
          .style("left", x + "px")
          .style("top", y + "px")
        d3.select("#tooltip #countyname")
          .text(d.id);
        d3.select("#tooltip #average")
          .text('$' + d.properties.value);
        d3.select("#tooltip").classed("hidden", false);
    }
};
var mouseOut = function() {
    d3.select("#tooltip").classed("hidden", true);
    d3.select(this.parentNode.appendChild(this))
        .style({
          "stroke": "#FFFFFF",
          "stroke-width": 1,
          'stroke-linejoin':'round',
          'stroke-linecap': 'round',
          'opacity': 1, });
};
 g.append("g")
    .attr("class", "land")
    .selectAll("path")
    .data(counties.features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", function(d) {
        var value = d.properties.value;
        if (value) {
          return color(value);
        } else {
          return "#ccc"
        }
    })
    .on("mouseover", function(d) {
        if (d.properties.value > 0) {
        d3.select(this.parentNode.appendChild(this)) // workaround for bringing elements to the front (ie z-index)
            .style({
                "stroke": "#333",
                "stroke-width": 1,
                'stroke-linejoin':'round',
                'stroke-linecap': 'round',
                'cursor':'pointer',
                'opacity': 0.7,
            });
        }
    })
    .on("mousemove", mouseMove)
    .on("mouseout", mouseOut);

tooltipbar的代码与tooltip的代码相同。我可能做错了什么？以及如何解决这个问题。我完全被这个自动取款机难住了。