Tooltip Usability Question
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:
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="#" onmouseover="tooltips('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'.
<a href="#" class="tooltips" tooltipsMsg="Tools tip message number 1">
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 ?
How about something like this?
I personally wouldn't go for the scanning option, just because I might want to add more tooltips after the page has loaded.
<a href="#" onmouseover="tooltips(this.tooltipsMsg);" tooltipsMsg="Tools tip message number 1">
Edit: LOL, I just realised my suggestion only works in IE, that helps.
Last edited by thraddash; 10-26-2009 at 09:00 AM.
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:
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"
<a href="#" tooltipsMsg="Tools tip message number 1">
<div tooltipsMsg="Tools tip message number 1">blah blah blah</div>
After some consideration....
Lets say you stuck with the class scanning idea.
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.
<a href="#" class="Tooltipper" title="The tooltips content">Text</a>
If your anything like me, you'll change it hundreds of times before you end up back where you started :P
Last edited by thraddash; 10-26-2009 at 04:24 PM.
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.
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.
I'm pretty sure custom attributes that you dynamically create via the DOM work in both IE and Firefox.
if it's escaped, then sure. jQuery could unescape it just before it's changed into html...
Originally Posted by slaughters
Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com
I only brought it up based on what I had tried:
Originally Posted by slaughters
<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>
title is your safest bet anyways, and it will still validate.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread