如何延迟基本的HTML工具提示？

Question

我想知道是否有任何方法可以延迟经典的HTML工具提示(请不要像qTip这样的jQuery插件).它只是一个按钮:

<input type="button" title="Click" value="My Button">

我想知道是否有任何方法可以使用纯JavaScript或客户端脚本来延迟标题.从我所研究的内容来看,它似乎不可能,因为它是实际操作系统GUI编程的一部分,这是不可能通过浏览器脚本访问,但如果有任何方式,我还没有遇到,我很想知道!谢谢!

Answer 1

浏览器控制工具提示.如果您想进行任何更改,则必须创建自己的更改.也许通过使用您所指的插件.

Answer 2

我迟到了 7 年多，但只是偶然发现了同样的愿望，并编写了一个简单的解决方案来使用 CSS 延迟工具提示。

只需使用过渡延迟或动画关键帧来实现不透明度。虽然过渡延迟是最简单的，但它会延迟悬停时的反应，据我所知。动画会绕过它，只会延迟开始，例如：

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
}


/* Tooltip text */

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #444;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 105%;
  opacity: 1;
  transition: opacity 1s;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%;
  /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #545 transparent transparent;
}


/*this is the IMPORTANT bit: hover with animation*/

.tooltip:hover .tooltiptext {
  visibility: visible;
  animation: tooltipkeys 1s 1; //here just change the 1s to you desired delay time!
  opacity: 1;
}

@-webkit-keyframes tooltipkeys {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes tooltipkeys {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes tooltipkeys {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tooltipkeys {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="tooltip"><span class="tooltiptext">delayed tip</span>Example</div>

有关工具提示的更多提示，您应该查看w3 学校以获得大量好的建议。