Results 1 to 12 of 12
  1. #1
    .
    Join Date
    January 18th, 2005
    Posts
    2,973
    Trying to find a simple tooltip solution
    I'm trying to find a "tooltip" solution that's simple and elegant. Here's what I'm using now:
    Code:
    <div title="This text is visible during a mouse-hover.">
    Point here to see tooltip/title
    </div>
    My solution (shown above) uses the title attribute (rather than the title tag in the "a" linking element). However, this "title-tooltip" is not persistent in most browsers; in Microsoft Internet Explorer and Google Chrome, for example, the title-tooltip vanishes after about 5 seconds. (In Firefox, it's persistent.)

    I'm trying to display somewhat lengthy product descriptions using this device, and of course people can't read more than a sentence in 5 seconds.

    I've searched for "tooltip code" but I'm afraid it looks complex to me. I understand that this is not something that can be done with just HTML/CSS, so I'm going to need some JavaScript, but I'd really like to a find a simple, elegant solution.

    I would also prefer not to misuse the "title" attribute for this purpose, since I'm not displaying a title (this is an accessibility issue for the visually impaired).
    Last edited by markwelch; February 2nd, 2011 at 03:33 PM. Reason: Clarifications & corrections.

  2. #2
    Moderator MichaelColey's Avatar
    Join Date
    January 18th, 2005
    Location
    Mansfield, TX
    Posts
    16,232
    It doesn't get any simpler than title tags, but I wouldn't be surprised if someone has some other solutions that might be more powerful or user-friendly. Looking forward to seeing what people suggest!
    Michael Coley
    Amazing-Bargains.com
     Affiliate Tips | Merchant Best Practices | Affiliate Friendly? | Couponing | CPA Networks? | ABW Tips | Activating Affiliates
    "Education is the most powerful weapon which you can use to change the world." Nelson Mandela

  3. #3
    Comfortably Numb John Powell's Avatar
    Join Date
    October 17th, 2005
    Location
    Bayou Country, LA
    Posts
    3,432
    Try out overLIB. I played with it a couple of years ago and have an example that still works on one of my sites. If you need a link shoot me a pm.


  4. #4
    .
    Join Date
    January 18th, 2005
    Posts
    2,973
    Thanks, John. I took a quick look and OverLIB still seems a little complex for my needs, and it also appears designed to work only with "a" (link) tags.

    One problem I'm encountering is that all of the scripts I'm finding seem to assume that I'm going to have the script files installed in the same directory as my web pages. Oddly enough, that would be fine for simple projects, but once a project gets big enough to need a half-dozen include files (as most of these do), I think it's time to use separate directories for the include files ( /js/ /css/ etc). and then I expect I'd need to modify a bunch of code to deal with that.

    When I started, I was looking for a 5- or 10-minute solution. I'd gladly follow through now if it would just take 30 minutes or an hour -- but if it's going to take me 10 hours, I don't have time to do it this month.

    And unfortunately, I've now spent about two hours searching for a simple solution. A couple web sites proclaimed that they offered "simple" solutions, but each had five or six steps, multiple include files, etc. I've now downloaded four specific solutions, each with promise, but complexity soon bloomed (and thus far, all seem to require implementation using <a title=).

    I think it's time to add this one to the queue for "non-urgent projects that would be convenient, but which require an uncertain amount of time (5 to ?? hours), with no clearly-defined benefit." (And yes, I understand that this is just one rung from the bottom of the queue.)
    Last edited by markwelch; February 2nd, 2011 at 07:32 PM.

  5. #5
    ABW Veteran Mr. Sal's Avatar
    Join Date
    January 18th, 2005
    Posts
    6,795
    Quote Originally Posted by markwelch View Post
    My solution (shown above) uses the title attribute (rather than the title tag in the "a" linking element). However, this "title-tooltip" is not persistent in most browsers; in Microsoft Internet Explorer and Google Chrome, for example, the title-tooltip vanishes after about 5 seconds. (In Firefox, it's persistent.)

    I'm trying to display somewhat lengthy product descriptions using this device, and of course people can't read more than a sentence in 5 seconds.

    I've searched for "tooltip code" but I'm afraid it looks complex to me. I understand that this is not something that can be done with just HTML/CSS, so I'm going to need some JavaScript, but I'd really like to a find a simple, elegant solution.

    I would also prefer not to misuse the "title" attribute for this purpose, since I'm not displaying a title (this is an accessibility issue for the visually impaired).
    Mark, If you're looking for a persistent text tooltip, check this site out:
    qTip - The jQuery tooltip plugin - Home

    qTip is a tooltip plugin for the jQuery framework. It's cross-browser, customizable and packed full of features!
    You can see some working samples there: Simpletip - A simple jQuery tooltip plugin#

  6. #6
    .
    Join Date
    January 18th, 2005
    Posts
    2,973
    Thanks, Mr. Sal. I'd already checked that out, and many more, after finding a nice roundup ("100 tooltip scripts in css jquery javascript and more"). So far, nothing seems "right." But I know that I'm tired and cranky, so I really do need to drop this into the queue for later consideration.

  7. #7
    ABW Ambassador JoyUnltd's Avatar
    Join Date
    January 19th, 2005
    Location
    Emerald City
    Posts
    2,019
    Was googling around for hearing aid comparisons & came across a site that used tooltips that seem to fit your description (hover over the aid styles): Superior Hearing Aid Prices | Hearing Revolution. I checked the hearing aid our_tooltips.js source code, it looked very simple to set up your content.

    This is the script author, dyn-web.com: Demonstrating Tooltip Features. Text only, text + image tooltips, add links, position & style to your heart's content.

    It costs $35 (single site only), but you can download it first & try it out. It's free only for personal use.
    Last edited by JoyUnltd; February 7th, 2011 at 01:32 PM. Reason: clarification
    Renée
    Pay no attention to that woman behind the curtain. -Wizardress of Oz

  8. #8
    .
    Join Date
    January 18th, 2005
    Posts
    2,973
    Thanks -- this merchant has certainly done a good job with these tooltips. I've bookmarked the URL so I can find it again when I return to this project.

  9. #9
    ABW Ambassador JoyUnltd's Avatar
    Join Date
    January 19th, 2005
    Location
    Emerald City
    Posts
    2,019
    Somewhat related: I finally learned to place all my JS code at the bottom of the page, just before </body> to reduce header requests & speed page loading. Just make sure you put the .js executable code (the content .js) last.
    Renée
    Pay no attention to that woman behind the curtain. -Wizardress of Oz

  10. #10
    Comfortably Numb John Powell's Avatar
    Join Date
    October 17th, 2005
    Location
    Bayou Country, LA
    Posts
    3,432
    Quote Originally Posted by JoyUnltd View Post
    Somewhat related: I finally learned to place all my JS code at the bottom of the page, just before </body> to reduce header requests & speed page loading. Just make sure you put the .js executable code (the content .js) last.
    That may depend on what your JS is going to do. In the Google Analytics help area they say:
    Copy and place the code snippet
    Once you find the code snippet, copy and paste it into your web page, just before the closing </head> tag*. If your website uses templates to generate pages, enter it just before the closing </head> tag in the file that contains the <head> section. (Most websites re-use one file for common content, so it's likely that you won't have to place the code snippet on every single page of your website.) For the best performance across all browsers we suggest you position other scripts in your site in one of these ways:
    • before the tracking code snippet in the <head> section of your HTML
    • after both the tracking code snippet and all page content (e.g. at the bottom of the HTML body)

    Now that's for their latest version. They used to say put it at the bottom just above </body>. Some JS that I use just won't work unless it's in the <head> area.


  11. #11
    ABW Ambassador JoyUnltd's Avatar
    Join Date
    January 19th, 2005
    Location
    Emerald City
    Posts
    2,019
    Quote Originally Posted by John Powell View Post
    That may depend on what your JS is going to do. <snip> They used to say put it at the bottom just above </body>. Some JS that I use just won't work unless it's in the <head> area.
    Thank you for that caveat.
    Renée
    Pay no attention to that woman behind the curtain. -Wizardress of Oz

  12. #12
    ...and a Pirate's heart. Convergence's Avatar
    Join Date
    June 24th, 2005
    Posts
    6,918
    Have you looked at stickytooltip?

    Using it on drop ship sites we build for customers...
    Salty kisses, Sandy toes, and a Pirate's heart...

  13. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. Find Your Innovative Hygienic Solution
    By Stefanie Tu in forum BettyMills
    Replies: 0
    Last Post: October 11th, 2011, 02:07 PM
  2. Looking for simple solution to track affiliates
    By Suzanne in forum Programming / Datafeeds / Tools
    Replies: 2
    Last Post: October 24th, 2005, 02:00 PM
  3. Replies: 61
    Last Post: December 8th, 2003, 10:39 PM

Posting Permissions

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