Can I depend on the title attribute showing up as

问题:

We've been coding simple tooltips into our web site for a while, and just realized that we could accomplish the same thing by simply using the "title" attribute. Any reason that we shouldn't use the title attribute as a tooltip? Are there any browsers that don't support this feature? (w3schools seems to indicate that all major browsers support this.)

回答1:

It is a standard, you should be pretty safe.

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

回答2:

All major browsers supports title. But then you don't have ability to show this kind of custom tooltips: http://www.dreamcss.com/2009/03/list-of-25-javascriptajax-css-tooltip.html

Have you seen Users hover card on SO (this site)? If they have used title then it might be not possible to show such a wonderful tooltip.

回答3:

All major browsers do indeed support tooltips, so feel free to use the title attribute for them. I would caution that you also provide an alt attribute to mirror the title for the sake of accessibility (mostly for low-vision and blind users) and fault tolerance (like if the image fails to load or the user is using an image-blocking user agent from a slow connection).

回答4:

It's really slow to show up(1s or 2 on Chrome) and I doubt modern internet users have that much patience waiting for it to show.

You could use third party plugins or hard code it yourself(what I do most of the time) using jQuery's "mouseenter" and "mouseleave" events. Dummy code as below: html:

<button id="button-awesome">Awesome</button>

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

JavaScript/jQuery:

$('#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. 
});

回答5:

Be careful when it comes to mobile browsers. It mostly isn't supported there.