工具提示的样式只能部分起作用

<span class="tooltip">这是工具提示的内容</span>

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

.tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  padding: 10px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s;
}

.tooltip:hover::after {
  visibility: visible;
  opacity: 1;
}

// 原生JavaScript示例
var tooltip = document.querySelector('.tooltip');
tooltip.addEventListener('mouseover', function() {
  tooltip.classList.add('active');
});
tooltip.addEventListener('mouseout', function() {
  tooltip.classList.remove('active');
});

// jQuery示例
$('.tooltip').hover(function() {
  $(this).addClass('active');
}, function() {
  $(this).removeClass('active');
});