Tooltip for a line of text

Question

<td title="this is a really long line that I'm going to truncate">this is a really long line that I'm going to trunc ...</td>

Is this the correct way to do it?

Answer 1

Yes, that's how you supposed to assign tooltips to html elements. I wouldn't use it on <td> though. Although I haven't tested it, I have the feeling that you might run into issues on some browsers if you use it on table rows/cells directly since these elements have somewhat different behaviour from other elements. You should rather use it on more "regular" elements, for example <div>, <span>, <img> or <input>.

Answer 2

The "title" attribute doesn't work inside the "td" tag. Enclose the text within a span tag instead:

<td><span title="this is a really long line that I'm going to truncate">this is a really long line that I'm going to trunc ...</span></td>

Answer 3

I agree with @DrJokepu, the title attribute is the way to do this, but probably not on the TD element, try the ABBR element, that's what it's for, or failing that, a simple SPAN is probably best.

Answer 4

There is a maximum length for the title. It's around 80 characters (tested on FF2).

So if your text is really long the title won't help. There are several good css/javascript tooltip solutions that will show whatever you need.

Answer 5

How would you format the text to show a line break? In IE 7.0

<title="long line of text\nanotherlong line of text" />

works as expected - but in Firefix 3.01 the "\n" is changed to a space. Using <br/> doesn't help either.

Answer 6

FF2 has a bug preventing it from displaying long titles: https://bugzilla.mozilla.org/show_bug.cgi?id=45375

Isn't title a core attribute? So it is valid on pretty much every tag (bar few eg. html, head etc.)

Answer 7

I appreciate that eventually the long lines wrap - it was just that I wanted to do a tiny bit of formatting of the lines by just including line breaks. No matter :)

Answer 8

If you want some control over the tooltip you could try modifying this to your needs css Tooltip