更改"标题"属性的工具提示出现的速度

Question

有没有办法改变元素的"标题"属性的工具提示的速度？如果工具提示立即出现,我会喜欢它,但似乎需要几秒钟才能完成.

Answer 1

不,没有办法.该title属性以依赖于浏览器的方式实现.例如,我记得IE和FF在\r\n内部使用时的差异.

Mozilla的文档很好地解释了限制和功能.

如果你想要自定义,你可以看看第三方插件,如qTip2,它使用div和东西模仿它,并为您提供完全控制.

Answer 2

您可以按照建议使用jqueryUI.控制show属性的持续时间的示例:

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

Answer 3

不幸的是，目前还没有办法做到这一点，

所以我使用以下方法来提供帮助。（无需依赖）

<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>

如果您不希望标题与之冲突，您可以使用data-* ^{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>

下面的链接也可能对您有帮助。

• 在简单的 CSS 工具提示上淡入和淡出

Answer 4

Jquery UI工具提示非常简单且可自定义:只需在页面中下载或包含 jquery UI即可.

如果您希望在悬停时立即显示页面的所有工具提示,请使用以下命令:

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

请注意,这适用于具有"title"属性的所有元素.您可以修改选择器以仅影响类,并设置自定义速度或效果:

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

Answer 5

无法更改默认浏览器工具提示的显示速度,但您可以使用其中一个工具提示插件(此处为少数:http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/)你可以自定义很多东西,包括延迟.