Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Simple tooltip - Title Attribute?

Tags:

html

tooltip

When I want to have a message show when a user mouse overs an object, and lately I just use the title attribute on my html tags since it's simple and automatically doesn't go off screen.

Question: Is using the title attribute is a bad thing to rely on for a tool-tip?

Ignoring the fact you can't customize it, I'm curious about functionality over using a custom made tool-tip (such as how the standard user interacts with it). A specific web-comic I read, for example, uses the title attribute to add a witty comment / factoid when you hover over it. Yet not many people seem to know about it.

As such it seems a title might be good for a comment, or even saying author of a picture, but is it good for a true simply tool-tip?

Considering for a 'real' tool-tip you need usually 1-2 extra elements, css (and depending how you set it up, possibly some inline style for placement), and possibly even java-script, is the title attribute bad to use since (again) it cannot be customized, is often a small off-topic detail about the element, and only appears after a set amount of time.

Note: If it helps (food for thought), my current situation that brought this question on, is I like when a site has something like [?] for you to hover over to find more details without shoving them into the page, thus keeping it simple. Also, I learned html from w3schools, and they never mention the title attribute, so not really sure what they are intended / should be used for. (and yes, mentioning w3schools part was a (bad) attempt at getting sympathy)

And I find this question kind of weird to ask considering SO uses them quite a bit, but feel free to assume I know nothing about it as... well... I really don't)

like image 522
Fewfre Avatar asked Jun 22 '12 18:06

Fewfre


1 Answers

The title attribute (@title), should not be used.

  1. Every browser does their own thing with the @title, even though it looks the same.
  2. For people who just use the keyboard, they cannot get the information in @title.
  3. People accessing the site from a mobile device, cannot get the information.
  4. Some, but not all assistive technology can get the information in the @title
    1. some allows it to be read after enabling it. Which not many people (users) know about.
    2. other technology simply ignores the link text and reads the @title only.

Ex of 4.2:

<a href="#" title="Are you sure?">Delete your account</a>

This will read:

Are you sure? Link

Further Reading: PG: Title attribute

like image 182
Ryan B Avatar answered Sep 29 '22 07:09

Ryan B