更改“ title”属性的工具提示显示速度

有没有一种方法可以更改元素的“ title”属性中的工具提示的速度？我希望工具提示立即出现，但似乎需要几秒钟才能出现。

97187 次浏览
小开
最佳答案

不，不可能。title属性是以与浏览器相关的方式实现的。例如，我记得 IE 和 FF 在内部使用 \r\n时的区别。

Mozilla 的文档很好地解释了这些限制和功能。

如果你想自定义，你可以看看第三方插件，如 QTip2，它使用 div 和 stuff 模仿它，并提供给你完全的控制。

小开

改变默认浏览器工具提示显示的速度是不可能的，但是你可以使用一个工具提示插件(这里有一些: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/) ，在这里你可以自定义很多东西，包括延迟。

小开

您可以按照建议使用 jqueryUI:

$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } });
小开

Jquery UI 工具提示 非常简单且可定制: 只需在页面中使用 下载或 包括 Jquery UI 即可。

如果希望页面的所有工具提示立即在鼠标悬停时显示，只需使用以下工具:

$(document).tooltip({show: null});

注意，这适用于所有具有“ title”属性的元素。 您可以修改选择器以仅影响一个类，并设置自定义速度或效果:

$('.yourClass').tooltip({show: {effect:"none", delay:0}});
小开

TippyJS 有十亿个定制选项。

Example TippyJS tooltip

Https://atomiks.github.io/tippyjs

Https://github.com/atomiks/tippyjs

小开

不幸的是，还有 没有的方法可以做到这一点,

所以我使用以下方法来帮助

<style>
[title] {
position: relative;
}


[title]:after {
content: attr(title);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out; /* 👈 Change the time to meet your requirements. */
}


[title]:hover:after {
opacity: 1;
}
</style>


<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" title="hello world">my div</div>
<button title="for debug">button</button>

如果您不希望 书名与它冲突，您可以使用 资料 * W3school. data-* 帮助您，例如。

<style>
[data-tooltip] {
position: relative;
}


[data-tooltip]:after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out;
}


[data-tooltip]:hover:after {
opacity: 1;
}


div[data-tooltip]:after {
left: 5px!important;
}
</style>


<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" data-tooltip="hello world">my div</div>
<button data-tooltip="for debug">button</button>
<button title="for debug">title only</button>
<button data-tooltip="my tool tip msg" title="my title msg">title and tooltip</button>

下面的链接也可以帮助你。


提交答案