在整页js中创建带箭头的工具提示

<button class="tooltip-trigger">Hover me</button>
<div class="tooltip">This is a tooltip</div>

.tooltip-trigger {
  position: relative;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  font-size: 14px;
  display: none;
}

.tooltip:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #f1f1f1 transparent;
}

const tooltipTrigger = document.querySelector('.tooltip-trigger');
const tooltip = document.querySelector('.tooltip');

tooltipTrigger.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

tooltipTrigger.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});