使用 JavaScript 实现鼠标悬停显示完整文本提示框

2022-12-08 21:34:38

使用 JavaScript 实现鼠标悬停显示完整文本提示框

在前端开发中，我们常常需要处理文本截断的情况，这可能会给用户带来不便。为了解决这个问题，我们可以使用 JavaScript 和 CSS 来实现鼠标悬停显示完整文本提示框的功能。

实现思路

要实现这一功能，我们可以采取以下步骤：

为需要显示完整文本的元素添加类名。 例如，"tooltip"。
在 CSS 中为 ".tooltip" 类名添加样式。 包括文本截断、光标样式等。
使用 JavaScript 编写代码，在鼠标悬停在 ".tooltip" 类名的元素上时，显示一个包含完整文本的提示框。 并添加动画效果。

代码示例

// 获取所有带有 "tooltip" 类的元素
const tooltips = document.querySelectorAll(".tooltip");

// 遍历所有元素并添加事件监听器
tooltips.forEach((tooltip) => {
  // 添加鼠标悬停事件监听器
  tooltip.addEventListener("mouseover", (e) => {
    // 创建提示框元素
    const tooltipElement = document.createElement("div");

    // 设置提示框样式
    tooltipElement.classList.add("tooltip-text");

    // 获取被截断的文本
    const tooltipText = tooltip.dataset.tooltip;

    // 将被截断的文本添加到提示框中
    tooltipElement.innerHTML = tooltipText;

    // 获取元素的坐标
    const tooltipRect = tooltip.getBoundingClientRect();

    // 设置提示框的位置
    tooltipElement.style.left = `${tooltipRect.left}px`;
    tooltipElement.style.top = `${tooltipRect.bottom}px`;

    // 添加动画效果
    tooltipElement.classList.add("tooltip-text--show");

    // 将提示框添加到页面中
    document.body.appendChild(tooltipElement);
  });

  // 添加鼠标移出事件监听器
  tooltip.addEventListener("mouseout", (e) => {
    // 移除提示框
    const tooltipElement = document.querySelector(".tooltip-text");
    if (tooltipElement) {
      tooltipElement.classList.remove("tooltip-text--show");
      setTimeout(() => {
        tooltipElement.remove();
      }, 200);
    }
  });
});