javascript 如何使工具提示的外观和感觉与我们在元素中添加“title”属性时相同？

9gm1akwq 于 2023-01-16 发布在 Java

关注(0)|答案(2)|浏览(133)

当我们向元素添加"title"属性时，我尝试复制工具提示的外观。

工具提示应可悬停
应通过按Esc键关闭工具提示

目前，我的自定义工具提示不可悬停。而且外观和感觉与-https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_title不匹配
任何帮助都是非常感谢的

const tooltipTrigger = document.querySelector(".tooltip-trigger");
const tooltipText = document.querySelector(".tooltip-text");

tooltipTrigger.addEventListener("mouseenter", showTooltip);
tooltipTrigger.addEventListener("mouseleave", hideTooltip);
tooltipText.addEventListener("keydown", dismissTooltip);

function showTooltip() {
  tooltipText.style.visibility = "visible";
}

function hideTooltip() {
  tooltipText.style.visibility = "hidden";
}

function dismissTooltip(event) {
  if (event.keyCode === 27) {
    tooltipText.style.visibility = "hidden";
  }
}

.tooltip-text {
    visibility: hidden;
    position: absolute;
    background-color: #000;
    color: #fff;
    padding: 4px;
    z-index: 1;
}

.tooltip-trigger{
    cursor: pointer;
}

.tooltip-trigger:hover .tooltip-text {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Tooltip</title>
  </head>
  <body>
    <span class="tooltip-trigger" aria-describedby="tooltip-text"
      >Hover over me</span
    >
    <div id="tooltip-text" class="tooltip-text" role="tooltip">
      This is the tooltip text
    </div>
    <script src="script.js"></script>
  </body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/75120608/how-to-make-a-tooltip-with-the-same-look-and-feel-as-when-we-add-title-attribu

2条答案

按热度按时间

kh212irz1#

const tooltipTrigger = document.querySelector(".tooltip-trigger");
const tooltipText = document.querySelector(".tooltip-text");

let timeout = null;

tooltipTrigger.addEventListener("mouseenter", showTooltip);
tooltipTrigger.addEventListener("mouseleave", hideTooltip);
window.addEventListener("keydown", dismissTooltip);

function showTooltip(event) {
  timeout = setTimeout(() => {
    tooltipText.style.visibility = "visible";
    tooltipText.style.left = `${event.clientX}px`
    tooltipText.style.top = `${event.clientY}px`
  }, 1000)
}

function hideTooltip() {
  clearTimeout(timeout);
  timeout = null;
  tooltipText.style.visibility = "hidden";
}

function dismissTooltip(event) {
  if (event.key === 'Escape') {
    tooltipText.style.visibility = "hidden";
  }
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  background-color: #000;
  color: #fff;
  padding: 4px;
  z-index: 1;
}

.tooltip-trigger {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>Tooltip</title>
</head>

<body>
  <span class="tooltip-trigger" aria-describedby="tooltip-text">Hover over me</span
    >
    <div id="tooltip-text" class="tooltip-text" role="tooltip">
      This is the tooltip text
    </div>
    <script src="script.js"></script>
  </body>
</html>

赞(0）回复(0）举报 2023-01-16

qv7cva1a2#

最终的答案是，事实上，你不能。
您无法复制title属性生成的工具提示的确切行为，这仅仅是因为它们的外观和行为在浏览器、设备和操作系统之间可能会有很大的不同。
你当然可以尝试在一个特定的浏览器/设备/操作系统上非常接近它的样子，但不可能在任何地方都完全复制。注意，使用用户代理检测来微调通常是一个坏主意。

赞(0）回复(0）举报 2023-01-16

我来回答

javascript 如何使工具提示的外观和感觉与我们在元素中添加“title”属性时相同？

2条答案

相关问题

热门标签

最新问答