d3.js在地图上悬停不显示文本框，css问题

// 创建一个SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建一个地图区域
var map = svg.append("g")
  .attr("class", "map");

// 创建一个文本框
var tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("display", "none");

// 加载地图数据
d3.json("map.json", function(error, data) {
  if (error) throw error;

  // 绘制地图
  map.selectAll("path")
    .data(data.features)
    .enter()
    .append("path")
    .attr("d", path)
    .on("mouseover", function(d) {
      // 鼠标悬停事件
      tooltip.style("display", "block")
        .html(d.properties.name); // 设置文本框内容
    })
    .on("mouseout", function() {
      // 鼠标移出事件
      tooltip.style("display", "none");
    });
});