Results 1 to 8 of 8

Thread: Tooltip Usability Question

  1. #1
    Join Date
    Apr 2006

    Tooltip Usability Question

    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:

    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 ?

  2. #2
    Join Date
    Aug 2009
    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.
    Last edited by thraddash; 10-26-2009 at 09:00 AM. Reason: DOH!

  3. #3
    Join Date
    Apr 2006
    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">
    <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"

  4. #4
    Join Date
    Aug 2009
    After some consideration....

    Lets say you stuck with the class scanning idea.

    HTML Code:
    <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
    Last edited by thraddash; 10-26-2009 at 04:24 PM.

  5. #5
    Join Date
    Sep 2008
    Akron, OH
    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.

  6. #6
    Join Date
    Apr 2006
    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.

  7. #7
    Join Date
    Jul 2008
    urbana, il
    Quote Originally Posted by slaughters View Post
    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...
    Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

  8. #8
    Join Date
    Aug 2009
    Quote Originally Posted by slaughters View Post
    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:

    <a href="#" onclick="alert(this.title);" title="Custom Title text">TEXT</a>
    <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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.10124 seconds
  • Memory Usage 2,931KB
  • Queries Executed 13 (?)
More Information
Template Usage (35):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (5)bbcode_code
  • (1)bbcode_html
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (8)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (8)postbit
  • (8)postbit_onlinestatus
  • (8)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (71):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • bbcode_parse_start
  • postbit_imicons
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates