5

我想知道是否有任何方法可以延迟经典的 HTML 工具提示（请不要使用 qTip 之类的 jQuery 插件）。它只是一个按钮：

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

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

4

3 回答 3

8

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

于 2012-12-11T00:12:55.577 回答
2

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

于 2012-12-11T00:14:57.730 回答
2

我迟到了 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 学校并提供大量好的建议。

于 2020-03-02T12:30:16.167 回答