Tooltips

tooltip for something other than a link

[smokeyb]

Hi all
Is it possible to attach a tooltip to a piece of text? Here's what I mean: Say you had a page about the World Trade Organisation, and in your text, after you wrote the word once you used WTO instead of it's full description. Could you then attach a tooltip over the 'WTO' instances that showed 'World Trade Organisation'?
Thanks for any help offered

[DrDoc]

<acronym title="World Trade Organisation">WTO</acronym> ;)

In fact, you can use the

title

attribute on any element...

[piskie]

Doc
Which browsers is this compatible with?

[choster]

IE 4+ and Mozilla/Firebird/Netscape 6+ display title attributes as tooltips on Windows-- for the tags they support. For example, Internet Explorer does not recognize the <abbr> tag, thus no tooltip appears if you enter

<abbr title="Dictionary of Naval Abbreviations">DICNAVAB</abbr>

IE also incorrectly renders alt attributes as titles.

Safari displays titles in the status bar instead of as a tooltip. Opera 6+ displays both tooltip and status bar text. Netscape 4 displays neither.

[smokeyb]

Thanks DrDoc, as always you have completely demystified it for me. But is there a way I can make the acronym instances stand out more? I have changed their colour and made them bold (and a few other ideas) but they still don't say 'hover over me!'. I really want something like the little hand to appear, without it linking anywhere. Is that possible or does anyone have any other ideas?
Thanks

[RammsteinNicCage]

What is better to do, use just title or title and alt?

Jennifer

[tedster]

Jennifer, it all depends on what you're trying to achieve - there's no one approach that is "better" all the time, it's an informed trade-off as are most web development situations.

I'd suggest you look at whether your aims are:

1. Cross browser tool-tip visibility
2. Old browser tool-tip visibility
3. Search engine help (title attributes don't get much respect so far, but "alt" gets some on linked images)
4. Accessibility for assistive user agents - especially synthesized voice browsers

And then you study your audience and make your decision. There are a lot of factors to weigh in any of the above goals.

To always use both attributes with identical contents is a pretty dicey practice, in my opinion. It adds to the page's file size with minimal pay-off and may aggravate some users.

But in specific spots, where a tool tip may be very useful for your users, then I would make an exception and do both. Having said that, a tool-tip is nevertheless a bad place for essential information most of the time. It's appearance on screen is temporary, easily missed, and not uniformly implemented.

[edited by: tedster at 1:02 am (utc) on Dec. 21, 2003]

[aevea]

I've seen a lot of sites that put a dotted or dashed bottom- border on the acronym and use the help cursor.

acronym {border-bottom: 1px dashed #beefed; cursor: help; }

I've been using both title's and alts lately because a lot of browsers won't display the alts if the image loads. I make the alt a short 2-3 word replacement description and the let the title convey a little extra info.

Adam

[smokeyb]

Adam
Could you expand on what you wrote a little, I didn't really understand the code. It sounds like what I need though. Thanks to everyone for their help
Smokey

[aevea]

The code is css, you can put it in an external file named whatever.css and then call it from the head section of your page with a rel link like:

<link href="monkey.css" rel="stylesheet" type="text/css" media="screen" />

or embed it in the head like on this page.

<style TYPE="text/css">
<!--
body {margin: 1px; padding: 0px; } 
a {text-decoration: underline; } 
a:hover {color: #ff0000; background: #ffff00;
text-decoration: underline; }
-->
</STYLE>

Adam