Question

我们已经将简单的工具提示编码到我们的网站上一段时间，并且意识到我们可以通过简单地使用“title”属性来完成同样的事情。我们不应该将title属性用作工具提示的任何原因？是否有任何浏览器不支持此功能？（w3schools似乎表明所有主流浏览器都支持此功能。）

Answer 1

这是一个标准，你应该非常安全。

请参阅http://www.w3.org/TR/html4/struct/global.html#h-7.4.3

Answer 2

所有主流浏览器都支持title。但是，您无法显示此类自定义工具提示：http://www.dreamcss.com/2009/03/list-of-25-javascriptajax-css-tooltip.html

您是否在SO（本网站）上看到用户悬停卡？如果他们使用了标题，则可能无法显示如此精彩的工具提示。

Answer 3

所有主流浏览器确实都支持工具提示，因此请随意使用title属性。我会提醒您，为了可访问性（主要是针对低视力和盲人用户）和容错（例如，如果图像无法加载或用户使用图像阻止用户），您还提供了一个alt属性来镜像标题来自缓慢连接的代理）。

Answer 4

显示速度非常慢（Chrome上为1或2），我怀疑现代互联网用户是否有足够的耐心等待它展示。

你可以使用jQuery＆＃34; mouseenter＆＃34;你可以自己使用第三方插件或硬编码（我大部分时间都在做）。和＆＃34; mouseleave＆＃34;事件。虚拟代码如下： HTML：

＆＃13;

<button id="button-awesome">Awesome</button>

<div class="tooltip" style="display:none">
This is a button
</div>

＆＃13;

的JavaScript / jQuery的：

＆＃13;

$('#button-awesome').on('mouseenter', function () {
  show Tooltip // toggle, or slideToggle, or .css("display","block") or .removeClass('hidden')
}).on('mouseleave', function () {
  // undo what you've just done. 
});

＆＃13;

Answer 5

移动浏览器时要小心。它大部分都不受支持。

我可以依赖显示为工具提示的title属性吗？

5 个答案: