Tooltip Usability Question

[slaughters]

I'm putting together a new tooltip javascript function (this one with div gernerated drop shadows). It's not really done enough for a write up yet, but you can see a working example here:
http://www.stansight.com/DropShadowTipBox.html

I'm trying to make this as easy as possible for developers to use, but I have a question about how it's implemented. Currently to use it you place the function call within an 'onmouseover' attribute, like this:

<a href="#" onmouseover="tooltips('Tools tip message number 1');">

But - this means you need to use both the double and single quote mark, which means if your 'tip' has quotes it can get real messy. I thought of changing it so you just used a class name instead of an 'onmouseover'. Somethng like this:

<a href="#" class="tooltips" tooltipsMsg="Tools tip message number 1">

Where I would scan the page for all items with the class "tooltips" and automatically create onmouseover events for them, displaying the text found in the attribute 'tooltipsMsg'.

Is this second approach too obscure? Non-intuitive? I don't want people looking at the code in the page wondering what the heck is going on. I want it to be easy to use even for new and semi skilled developers.

Any thoughts ?

[thraddash]

How about something like this?

<a href="#" onmouseover="tooltips(this.tooltipsMsg);" tooltipsMsg="Tools tip message number 1">

I personally wouldn't go for the scanning option, just because I might want to add more tooltips after the page has loaded.


Edit: LOL, I just realised my suggestion only works in IE, that helps.

[slaughters]

Thanks for the reply.

Part of the problem I have with using the classname and extra attribute approach is that I end up breaking the function up into two separate pieces. And that sort of makes the function loose some of it's intuitiveness. I'm concerned that someone just seeing class="tooltips" in a DIV will not automatically connect that in their head with the attribute tooltipsMsg.

Hmmm... there is a thought. What if I just forget the using the class name and simply scan for tags which contain the attribute "tooltipsMsg"? So you could have something like:

<a href="#" tooltipsMsg="Tools tip message number 1">

or

<div tooltipsMsg="Tools tip message number 1">blah blah blah</div>

I could even grab the text of the message and create an "alt" or "title" attribute for the HTML tag/object so it would be more "Accessible"

[thraddash]

After some consideration....

Lets say you stuck with the class scanning idea.

<a href="#" class="Tooltipper" title="The tooltips content">Text</a>

When you have detected an element with your class type, the onmouse event is created and the title attribute is cleared. I won't suggest using the alt attribute or any other custom fields as I don't think it will be compatible will all browsers.

Also if javascript is disabled, the tooltip will still appear in some form like you mentioned previously.

If your anything like me, you'll change it hundreds of times before you end up back where you started :P

[cbVision]

Thraddash's method of using "title" is how I've always done tool tips. I build my tooltips by putting the HTML in the title="<h2>Whatever</h2>" and then using jQuery and CSS to display the tip.

[slaughters]

You can put HTML into a "title" attribute ? I did not think that would work. That is one reason I did not purse that idea

If it does then I could just do a tooltips-from-titles function. No need for a classname, just scan for everything that has a "title" attribute.

P.S.

I'm pretty sure custom attributes that you dynamically create via the DOM work in both IE and Firefox.

[rnd me]

You can put HTML into a "title" attribute ? I did not think that would work. That is one reason I did not purse that idea

if it's escaped, then sure. jQuery could unescape it just before it's changed into html...

[thraddash]

I'm pretty sure custom attributes that you dynamically create via the DOM work in both IE and Firefox.

I only brought it up based on what I had tried:

//WORKING
<a href="#" onclick="alert(this.title);" title="Custom Title text">TEXT</a>

//NOT WORKING IN FIREFOX
<a href="#" onclick="alert(this.tooltipsMsg);" tooltipsMsg="Custom Title text">TEXT</a>

Assigning custom attributes in Javascript definitely works, but I'm not too sure about it being written directly into html?

title is your safest bet anyways, and it will still validate.