Question

我想知道是否有任何方法可以延迟传统的HTML工具提示（请不要像qTip这样的jQuery插件）。它只是一个按钮：

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

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

Answer 1

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

Answer 2

这是系统的一项功能，您无法使用HTML，CSS或JavaScript进行操作请记住，不同的操作系统对这些工具提示有不同的延迟和样式，考虑更好的控制（延迟，样式，动画等）的最佳选择是实现自己的工具提示。

Answer 3

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

只需使用过渡延迟或动画关键帧来提高透明度。虽然过渡延迟最简单，但是它有延迟将反应延迟到悬浮中和延迟悬浮的麻烦，即afaik。动画绕过该动画，只会延迟开始，例如：

.html部分...

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

.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: 0;
  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;} }

我在StackOverflow上还是有点笨拙。无法完全看到格式化的位置，但预览效果很好。如果有事请原谅我。有关工具提示的更多提示，您应该向w3学校咨询很多很好的建议。

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

3 个答案: