Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ajax Tooltip 1.2 issues

    Well, I have little hope of a response given the level of activity here, but here goes...

    I have this otherwise neat script installed in my web pages. However, it does two things that make it unacceptable.

    1. If the page is within an iFrame (we have no choice at this point. We have to use an iFrame), the tooltips pop up outside of the frame and are therefore unreadable.

    2. Sometimes the tooltips get stuck open and end up behind another tooltip, creating confusion for the visitor.

    I can solve #1 by not allowing the tooltip to float around, but I can't solve 2. Is there a way to tune up this script so it's more responsive.

    Please help. My only alternative to this is to go to Flash, and I hate Flash more than I hate iFrames.

    Thanks.

    Randy

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Well, you have to expect someone to ask... Why is it that you have to go with iframes?

    Are the tooltips being generated from code in the iframe or the parent page? Are the parent page and the iframe on the same domain?

    You can set a timer to close each tooltip. You would use setTimeout to create a timer for each tooltip when it is created. You would then need to create a function that checks to see if the tooltip 1) still exists, and 2) is no longer being hovered over -- if both are true, then kill the tooltip. Then set the timer to call that function on that tooltip in "x" seconds.

    But we might not have to dig into the script if we can figure a better way to display your content in the first place. Iframes are almost never the answer.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Persistent tooltip

    I have experienced the same problem, and I have determined it happens when the cursor moves off the hyperlinnk BEFORE the tootiip appears. It seems that in that case, the end of the mouseover event is lost, so the tooltip persists.

    I can reproduce this behavior on the example page, http://www.javascriptkit.com/script/...xtooltip.shtml

    Just move the cursor quickly over either the sample hyperlink or the box below it -- or both.

    I would like to know if there is any way to reduce the chances of this happening. It can happen rather often if the user's Internet connection is slowed, for any reason.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I think this link roughly explains the basic idea of my earlier response to this thread:

    http://stackoverflow.com/questions/1...ment-in-jquery

    That solution won't fit your exact needs without some adjustment. It is written for jquery (which I assume is OK for you if you're using the script from javascriptkit that you linked to) but the principles are the same even for javascript not based on a framework.

    You just use a named setTimeout (in other words, you assign it as a variable rather than simply starting the setTimeout - see below this post for a clarification) and a mouseover event on the tooltip to destroy that setTimeout if we ever get our mouse over the tooltip before the setTimeout actually fires (which we would not have done in the quick-pass situations you are seeing a problem with). You just need to make sure your setTimeout variable has global scope (in other words, declare it - even without any value - outside of any functions so that it is accessible to all other page functions).

    Does that make sense?

    Code:
    //Simply calling a setTimeout:
    setTimeout('do_something',50);
    
    //Setting a setTimeout call as a variable so we can access it later in order to cancel it:
    var my_timeout = setTimeout('do_something',50);
    
    //And then to actually cancel the named timeout you can do something like this:
    clearTimeout(my_timeout);
    You can brush up on setTimeout and clearTimeout use here, if it helps:
    http://www.w3schools.com/jsref/met_win_cleartimeout.asp
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    dankarlan (11-15-2011)

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I thought I saw enough to make the additions myself, but apparently I'm simply too new to java to know how to do this on my own. For example: do I put the additional code in the ajaxtooltip.js, in the file jquery-1.2.2.pack, in the <script> portion of my home page, or somewhere else? If this is the only javascript in my site, do I need to provide for the cancellation with clearTimeout?

    I would like to have several different links each with an associated tooltip (and different tooltip files opened and displayed at run time), but so only one displays at a time.

    Is there any text I can consult that would fill in the pieces that I'm missing?

    I can open ajaxtooltip.js with Notepad++, but when I try that with jquery-1.2.2.pack, everything is on one extremely long line. Is there another editor that can display that file in a more usable form -- if it turns out I need to modify that file?


  •  

    Posting Permissions

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