有父div和子div。希望我的工具提示从子div中删除。当我悬停父潜水时它会下降

<div class="parent">
  <div class="child">子div</div>
</div>

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f00;
  padding: 10px;
  color: #fff;
}

.tooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 5px;
}

// 获取父div和子div元素
var parentDiv = document.querySelector('.parent');
var childDiv = document.querySelector('.child');

// 创建工具提示元素
var tooltip = document.createElement('div');
tooltip.classList.add('tooltip');
tooltip.textContent = '工具提示内容';

// 将工具提示元素添加到子div中
childDiv.appendChild(tooltip);

// 监听父div的鼠标悬停事件
parentDiv.addEventListener('mouseover', function() {
  // 显示工具提示
  tooltip.style.display = 'block';
});

// 监听父div的鼠标离开事件
parentDiv.addEventListener('mouseout', function() {
  // 隐藏工具提示
  tooltip.style.display = 'none';
});