screenshots.gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tooltip Example</title>
  <style>
    .w {
      position: relative;
      display: inline-block;
    }
    
    .tooltip {
      position: absolute;
      display: none;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 5px;
    }
  </style>
</head>
<body>
  <a href="" class="w"><img src=""><span>百度地图</span></a>
  <a href="" class="w"><img src=""><span>YouTube</span></a>
  <a href="" class="w"><img src=""><span>GitHub</span></a>

  <div id="tooltip" class="tooltip"></div>

  <script>
    var links = document.getElementsByClassName("w");
    var tooltip = document.getElementById("tooltip");

    for (var i = 0; i < links.length; i++) {
      links[i].addEventListener("mouseover", showContent);
      links[i].addEventListener("mouseout", hideContent);
      links[i].addEventListener("mousemove", moveTooltip);
    }

    function showContent() {
      var spanContent = this.querySelector('span').innerText;
      tooltip.innerText = spanContent;
      tooltip.style.display = "block";
    }

    function hideContent() {
      tooltip.style.display = "none";
    }

    function moveTooltip(e) {
      tooltip.style.left = e.pageX + "px";
      tooltip.style.top = (e.pageY + 10) + "px"; // 可调整垂直偏移量
    }
  </script>
</body>
</html>