在页面加载时显示工具提示，然后自动隐藏

<span id="tooltip">需要显示工具提示的内容</span>

#tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

#tooltip::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  padding: 10px;
  background-color: #f1f1f1;
  color: #333;
  font-size: 14px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s;
}

#tooltip:hover::before {
  opacity: 1;
}

window.addEventListener('DOMContentLoaded', function() {
  var tooltip = document.getElementById('tooltip');
  
  tooltip.addEventListener('mouseover', function() {
    tooltip.classList.add('show');
  });
  
  tooltip.addEventListener('mouseout', function() {
    tooltip.classList.remove('show');
  });
});