JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<div class="tooltip" onmouseover="showTooltip(this)">
  Hover over me
</div>
<div class="tooltip" onmouseover="showTooltip(this)">
  Hover over me
</div>
<div class="tooltip" onmouseover="showTooltip(this)">
  Hover over me
</div>
<div class="tooltip" onmouseover="showTooltip(this)">
  Hover over me
</div>
<div class="tooltip" onmouseover="showTooltip(this)">
  Hover over me
</div>
<div class="tooltip" onmouseover="showTooltip(this)">
  Hover over me
</div>
<div class="tooltip" onmouseover="showTooltip(this)">
  Hover over me
</div>
<div class="tooltip" onmouseover="showTooltip(this)">
  Hover over me
</div>

CSS

.tooltip {
  position: relative;
  
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

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

JavaScript

function showTooltip(element) {
	var spans = element.querySelectorAll('span');

  // 循环遍历并删除每个 <span> 元素
  spans.forEach(function(span) {
    span.parentNode.removeChild(span);
  });
  
  // 创建 tooltip 内容
  var tooltipContent = document.createElement('span');
  tooltipContent.className = 'tooltiptext';
  tooltipContent.textContent = element.textContent; // 这里设置 tooltip 的内容

  // 将 tooltip 内容添加到 DOM 中
  element.appendChild(tooltipContent);

  // 设置 tooltip 的位置（可选）
  tooltipContent.style.top = '-' + tooltipContent.offsetHeight + 'px';
}