clueTip Plugin Beta 2

read 95 comments

Beta 2 of the clueTip Plugin for jQuery is out the door and on the server. I’ve made a number of fairly significant changes (for the better, I hope), both to the script and to the CSS. One notable addition is the ability to apply a “jTip” style to the clueTips by changing the CSS, setting the new “arrows” option to true and the new “dropShadow” option to false. Here is the full list of what has been changed:

Additional features/enhancements

  1. the waitImage feature/option is now implemented for ajax-loaded clueTips
  2. the drop-shadow effect is now created with dynamically generated div elements with decreasing level of opacity. This allows for cross-browser compatibility without having to deal with png hacks.
  3. added a dropShadow option that adds a drop shadow to the clueTip. Default is true
  4. the clueTip heading (<h3>) now comes before <div id="cluetip-inner">, not inside it. This should make it much easier to apply sane CSS.
  5. added alternate theme based on Cody Lindley’s jTip, and created demo files to show it (alt-demo.html, et. al.)
  6. added an arrows option that sets the vertical background position to line up an image with the hovered element. Default is false. This option should be set to true for the alternate jTip theme.
  7. <div id="cluetip"> now gets class="clue-left" if positioned to the left of the hovered element and class="clue-right" if positioned to the right. Useful for styling the clueTip differently based on where it displays, as is done in the jTip theme.

Bug fixes

  1. changed $(document).width() to the more appropriate $(window).width() for positioning the clueTip’s x coordinate.
  2. changed the clueTip’s height calculation to occur after truncate and tipTitle options are considered so that positioning will be more accurate and drop shadows will be applied correctly.
  3. fixed positioning glitch when applying clueTip to an area element; now it positions the clueTip relative to the mouse position.

Still to do

  1. Insert an iFrame behind the clueTip to prevent the select list from poking through in IE6.
  2. Allow sticky clueTips to be closed when a user clicks anywhere else on the page.

You can still find all of the necessary files by following the links in the clueTip Beta 1 blog entry.

Update

This plugin is a work in progress, in case you couldn’t tell. I’ve changed it a lot since posting this entry, so please refer to these pages from now on:

  • clueTip Project Page at the jquery.com plugin repository. You can grab the latest “stable” release and file bug reports there.
  • clueTip Info & Demo Page. You can take the plugin for a spin and learn how to use it there.
comment feed

95 comments

  1. Clemens

    Hi Karl!
    Brilliant work, you did here! Fantastic. That’s the functionality, I want on my Joomla based website.

    When I put my question here, I hope that nobody will be angry with me, because I have only very, very limited understanding of PHP and JS.
    I have started trying by a Tooltip from http://www.joomlaprodigy.com, called jqtipsjp. It is based on Cody Lindleys jtips.js and jquery.js and adds two PHP-files. In these two PHP-files the item ID number is extracted from the link and a request to the database will be performed, to get the text of that item ID to fill in in the tooltip.
    My trying has been successfull in getting this to work even with the latest changes, you have made to Cody Lindleys jtips.js allthough there were problems with IE6 and IE7. But at least, the Javascript did work together with the both PHP-files.

    Now I want to use your clueTip instead. And now it is not so simple, to replace the file names of the scripts and the CSS in the PHP-files. This did work on jTips but not on your clueTip.

    So either someone can help me out here or someone will help me via personal mail. I can afford to spend a small amount of money for it, if it is wanted.

    Kind regards
    Clemens
    Stuttgart / Germany

  2. Hi Clemens,

    I’d be happy to try to help you out with the transition from jTip to clueTip. There is a small amount of HTML modification that you’ll have to do since clueTip gets its parameters through other attributes and the clueTip() method itself rather than parsing the URL in the href.

    If you’d like me to look at your files and offer suggestions for migrating over to clueTips, send me an email with some info/links to files

  3. Hi Karl,

    we have been following the developments for quite a while now and are using clueTip since v0.2 for a project located at http://www.sandkastenliga.de.

    There are, however, still some issues with the most recent v0.7. Please have a look at: http://www.sandkastenliga.de/groupdetail.html?tab=day

    Issue #1:
    When hovering a clueTip link for only a very short time (so that the content is not able to load in this time) and then pulling the cursor away from the link again, the tooltip keeps loading and remains sticky forever, even though stickyness is not exactly wanted.
    This gets even worse when hovering very quickly from link to link.

    Issue #2:
    If the page has been scrolled down and a clueTip link is being hovered that is located on the lower end of the page, the entire page is scrolled up instead that the correct tooltip is shown. On the second try of the same link the tooltip is shown without any problems.
    Pretty weird…

    Issue #3 (minor):
    The tooltips’ z-index values are currently incompatible with the thickbox. The tooltips lie on top of the Tichkbox content.

    Please keep up the great work on the probably best tooltip solution out there. :)

    Cheers,
    to.rben

  4. Hi to.rben,

    These are just the kind of bug reports I need. Thank you so much!

    I haven’t been able to reproduce #1. Which browser are you using?

    I noticed #2 on your page, too. That is a weird one. I’ll have to look into this further.

    I have a simple fix for #3 in a test location. Feel free to give it a whirl if you’d like. Basically, I’ve added yet another option to the clueTips: cluezIndex. The default is now set to 97, because it looks like Thickbox 3 is setting its z-index to 100.

  5. Hi Karl,

    actually I’m able to reproduce #1 with both FF2 and IE6 on different machines on the mentioned page (http://www.sandkastenliga.de/groupdetail.html?tab=day).

    Try this, please:
    1. Hover a clueTip link only until the wait.gif shows up.
    2. As soon as the wait.gif appears, immediately leave the clueTip link to some whitespace on the page.
    3. Wait some seconds: the tooltip remains loading until it finally appears without the cursor in place over the clueTip link anymore.

    Are you able to reproduce it this way?

    Cheers,
    Torben

  6. Thanks for the further explanation, to.rben. I can reproduce it now. Will keep you posted.

  7. Hi to.rben,

    I think Issue #1 is fixed now. I’ve posted the script and the demo on a test server. If you wouldn’t mind testing your site with this version of the file, I’d greatly appreciate it.

    As for Issue #2, I haven’t quite figured out a way to fix that yet. The problem occurs, I think, because the plugin doesn’t quite get the correct height the first time due to the image not having fully loaded. One workaround for the time being, which was recommended by Dan Switzer, is to wrap the ajaxed image in a <span> tag with a height and width defined in its style attribute. So it would look something like this: <span style="height:80px; width: 50px"><img src="foo" alt="" /></span>

    Hope that helps. We’re getting closer!

  8. I am also having little issues even with 0.8 on your test site. It ihas so many advantages over jtip that I just don’t want to miss it.
    The two issues I am having are
    1. The images appear as blank box of the size equal t image size in IE6. It does not happen in IE7,FF, Opera.

    2. As mentioned in a post above, the page jumps to the top for the first time the tooltip is opened, I have tried it with image and without image but irrespective of whether the tooltip has image or not it happens. And it happens only with the tooltip fetched by ajax and not with local or just the title.

    Here is the link you can see here

    Thanks for your great work.

  9. Hi!
    @ Karl: So it seems, that my request to you has speeded up the development activities of Joomlaprodigy. So I don not keep my request any longer.

    @ JoomlaProdigy: I have written yesterday two E-Mails to you concerning some bugs. I could not find the IE-6 bug you have mentioned here. I have tested Sunday 23:20 local time Germany on your demo site.
    Is it right, that the tooltip positioning flips to the right and left only and not around the link on your demo site?

    @ Karl and JoomlaProdigy: I have seen something strange on joomlaprodigy’s demosite: On the second and third link, it responds immediately, when you click at the link at the first time. If you close the tooltips and then try to reopen again, then the link reacts only after a second click. This behaviour is the same on Firefox 2.02 Opear 9.2 and IE-6.
    On the first link on the demosite there is everything normal.

    I wish you both very much success with your programing. I am very very interested in the solution and I need it urgently for my latest website project!

    Kind regards
    Clemens

  10. Hi Karl,

    we’ll put v0.8 up with the next release very shortly. One more thing regarding issue #2 that just occurred to me: If I’m not mistaken the issue was not present with v0.2 of clueTip. Maybe this helps with your investigations…

    Thanks heaps so far!

    Cheers,
    Torben

  11. Hi there,

    v0.8 is up now and it definitely seems to solve issues #1 and #3. Thanks a lot for your help.

    If we can help you in any way with solving the still existing issue #2, we’d be happy to do that. Please keep us posted…

    Regards,
    Torben

  12. niner

    i’ve integrated this great plugin to my work project. everything works beautifully, but i just want to find out more about error handling. in the case of a timeout issue from the ajax’ed html that is supposed to return the html data to the tooltip, how do i set a value and display such error onto the tooltip if the operation times out?

    thanks.

  13. I’m still not sure how to fix #2. Did you try the workaround I suggested above? If that doesn’t work, or if it’s not a feasible solution for you, I’ll have to try to re-create your page locally so I can see what is going on. Could you perhaps try one other thing? What happens if you add the sticky:true parameter? Doesn’t that have any effect on the jumping?

    Thanks for bearing with me while I try to track this down.

  14. Hi Karl,

    we tried the following things:

    - setting the image’s height and width attributes statically
    - applying your workaround involving the <span> tag
    - replacing the complete ajax’ed content and with a simple and plain “test” (so, no images or any complicated output at all)
    - setting the sticky parameter to true

    Unfortunately, nothing of this had an effect. The sticky option didn’t quite solve the problem either but maybe gave a hint: The scrolling does not occur if tooltip1 is still shown while hovering and loading tooltip2. So, the actual tooltip changes once tooltip2 has finished loading its contents – without scrolling.

    Therefore, it might be possible that the scrolling bug is related to the display of the wait.gif. The waiting image was introduced after v0.2 which explains why the problem wasn’t there before. And it would also explain why the scrolling does not occur if the content is available due to a prior load (even without sticky option).

    Hope this helps.

    Cheers,
    Torben

  15. Thank you so much for this information! It’s helps a lot to be able to focus my attention and to know what hasn’t already worked for you. Looks like I’ll have some time to work on the plugin tomorrow night. Will let you know as soon as possible what I’ve been able to do.

  16. Hi again, to.rben,

    Based on your suggestion, I changed where the image is inserted into the DOM. Please give this modified version of jquery.cluetip.js a try. And if it that still doesn’t work, try commenting out lines 269-271 (the part that gets the position of the image and shows it). As always, thanks so much for your help in debugging this!

  17. -
    Hi,

    great improvements since the original jTip …

    One suggestion:
    I’d like to have an option “title” for “closePosition”, so that the “close” or “cross.png” will be in the title on the upper right corner (where usually the close cross is located in normal windows).

    thx

    djot
    -

  18. Excellent suggestions, djot. They are going on my todo list right away.

  19. -
    Hi, me again (part 6)

    Now I have a real problem …

    I have a table. Each table row has two images (icons) which show a tooltip each. When I click on the image, I disable the tooltip with a bind on click and a $(this).hide() .
    BUT if I hover the first icon and then do a fast click on the second icon, the second one gets loaded via ajax, the click event to hide the tooltip fails, because the ajax data (=tooltip) is not there … when the ajax request is over, the tooltip gets shown, which is incorrect in my case, because clicking on an icon should not show a tooltip nor continue loading one.

    Question:
    So how can I disable a tooltip, other than .hide() ??
    Tried “inactivate” and “cluetipClose”, but think these are private functions which I can’t access …

    Suggestion 1:
    So, even if I am able to hide the tooltips, I am not able to stop the ajax processing and displaying of the (second) tooltip. So I need something like “stop loading tooltip” or “stop loading, kill it if visible” method/function.

    Suggestion 2:
    Not related directly to this topic:
    I would like to show a “close” link, even if I did not set the tooltip to sticky.
    Why? I manage it all the time to display tooltips, which later do not disappear.
    So an option to show the close link, even if sticky=false would be nice. This way even accidently shown tooltips could be removed. (Reloading the page to kill the tooltip is not an option!)

    djot
    -

  20. Editor’s note: comments by djot have been consolidated into this one.

    1. I’d like to have an option “title” for “closePosition”, so that the “close” or “cross.png” will be in the title on the upper right corner (where usually the close cross is located in normal windows).
    2. tried to use a “waitImage” named “clueTip_wait.gif” which did not work. Solution: I had to comment the underscore like “clueTip\\_wait.gif”.
    3. I need non cached data in the tooltips. Perhaps you can add an option for this, attaching some random stuff to the ajax url like &random=123456 (e.g. timestamp or milliseconds).
    4. IE: Opening a clueTip in IE makes all my other images (logos, etc.) flicker (like beeing reloaded).
    5. IE: The drop shadow is only shown below the tooltip, on the right there is no dropshadow.
    6. IE: The title background-color does not fill the complete title line (row), stops about 20px before the outer left edge. The last 20px have the same background color as the content of the tooltip.
    7. I also need a timeout, before a tooltip gets shown, so accidently hovering will not do anything.
    8. Short one: Please replace background: with background-color: in jquery.cluetip.css
    9. The ajax call should time out (ok, guess we can set the ajax.timeout?) after a given time and call an error function like “onError” or “onTimeout”.
    10. A “beforeShow” option (function) could handle several things … in my case wait for a timeout.before really showing a tooltip.
    11. (Did you have a description for an “onShow” option on this site?? Can’t find it now: http://examples.learningjquery.com/62/demo/alt-demo.html#features
    12. Someone aked for closing a tooltip when clicking anywhere outside the tooltip … additionally, I would like to have the same possibility for clicking ANYWHERE INSIDE the tooltip – this way I (we) don’t even need a “close” link/icon.
  21. Hi djot,
    Thanks again for your excellent feedback. Here are some responses to your comments and questions as numbered in comment 20 above.

    You can see my progress with this stuff at this test location.

    #1: You asked for it, you got it.

    #2: thanks for that tip. I might try to pull the waitImage out of the js and into the css, but that will require creating a div and using the image as a background image. stay tuned.

    #3: I’ll look into this. more likely, I’ll allow for you to switch off caching through a parameter.

    #4: Haven’t seen this behavior, but I’m not surprised. I’ll look into it.

    #5: which theme? dropShadow is not recommended for the jtip theme. The original jTip plugin doesn’t use drop shadows, and I haven’t figured out a way to get them to show properly with the css the way it is in that theme.

    #6: good catch. it should now. please see the in-progress version linked above.

    #7: the clueTip has built-in support for the hoverIntent plugin. see “features” for details.

    #8: okay. that’s done.

    #9: you can access all of those ajax properties through the ajaxSettings option.

    #10: I think #9 covers this as well.

    #11: Please check the test version linked above.

    #12: I’ll put this on my maybe list, but it’s not a high priority for me. I don’t know of a way to have the “clicking anywhere outside the tooltip” feature without putting some kind of layer between the clueTip and the rest of the document, which would be bothersome for people trying to click on a link somewhere on the page when a clueTip is available. For clicking anywhere insdie the clueTip, wouldn’t that cause a problem if there were actual links in the clueTip?

    For your questions and suggestions in comment 19, it might help me to see a demo page to understand what you’re getting at. I still don’t understand why you would want a “close” link on a clueTip if it’s not “sticky.”

  22. Hi Karl,

    your changes in v0.8.1 did not have an effect on the scrolling issue. However, commenting out the suggested lines is a workaround that actually works. Of course, the loading image is (unfortunately) gone, but at least the scrolling is not that annoying anymore.

    Please keep us posted about the loading image. I personally wouldn’t mind if the loading image was even within the tooltip. Meaning that the tooltip’s borders are already displayed and the gif is centered in it. The content could then replace the image.

    Moreover, it would be great if the tooltips would support preloading of images as well. That is, that the tooltip is only displayed once all the content (including images) is loaded – not before.

    Cheers,
    Torben

  23. Hi again to.rben,

    I’m glad that commenting out those lines worked for you, but sorry that you needed to modify the plugin in order for things to be right on your site.

    For the short term, I’ll put a condition in the code to only show/hide the image if the waitImage option has a value. That way, you can change the default value of waitImage to '' or false in the plugin itself or add {waitImage: ''} or {waitImage: false} to the clueTip() method’s parameters.

    The problem with putting the loading image within the tooltip is that I don’t want to show the tooltip at all until its contents have been loaded — because the contents determine the height of the tooltip, and the height determines the vertical positioning. I’ll have to give this more thought.

    Your suggestion about not showing the tooltip until all images have been loaded is one that I dearly wish I knew how to implement. I just don’t know (yet) how to loop through the ajaxed content for every image and keep polling it until all the images have been completed loaded without creating a lot of overhead. I welcome any advice on this, though. Maybe I’ll post a question to the jQuery discussion list to see if anyone else has a bright idea.

  24. Tim

    Awesome script, but unfortunately makes conflict with Interface ifx.js for me in both IE6 and IE7.
    Once I include ifx.js file, all tooltips are broken.

    Please see 2 tests with the simplest code possible:
    http://odessagate.com/testit.html – with ifx.js included
    http://odessagate.com/testit-noifx.html – same code without ifx.js, works as intrended

    Please let me know if there is anything I can do to avoid this

  25. Hi Tim, that’s a really strange one. I’ve put up a test page, too, and I got it working without modifying anything. I used your ifx.js file, but my jquery.cluetip.js, jquery.dimensions.js, jquery.hoverIntent.js, and jquery.js.

    I think a good place to start might be to have a look at my page and grab and grab the .js files that I use. Oh yeah, you’ll also need the jquery.cluetip.css file. Then, start substituting your “min” versions of each, one by one (and change the references in your html accordingly), and see if any of those make it stop working.

    If there is anything else I can do to help, let me know. It might be easier at this point to use the contact form so we don’t clutter up the comments with a lot of back and forth.

    Thanks a lot for letting me know about this.

  26. Hey Karl. Thanks a BUNCH for providing such an awesome script. I use it on my anime site in a few areas. I was planning on having it replace my overlib code, but I seem to be having a problem with “data” inside the clueTip. For example, if I have a text box inside of the where I”m hiding local-data, I can’t access that inputted information using javascript.

    If I have a text box and I set the value to “10″. When I do a myVal = document.getElementById(“toxboxid”).value. The value of “myVal” is NULL. For some reason, clueTip doesn’t actually change the data on the page, it just “copies” it something. Is there anything I can do to access information inside of the clueTip?

    Thanks again for the awesome script.

  27. Brennan

    Hey everyone – Does anyone know how to have the cluetip center on the screen instead of going to the right side or left side of the link clicked?

  28. Hi Brennan — for that, you’re probably better off looking at a different plugin, such as jqModal.

  29. Erm, I take it there isn’t much we can do to get object data (using JS) that’s in a cluetip div, Karl? A yes or no will suffice. Thanks.

  30. But I don’t think a yes or no will suffice. To answer this question requires that I first understand it correctly and second test the issue, adjusting the demo so that it matches what you’re seeing. Then if I can’t replicate the problem, I need to try in various browsers until I can. And once I can replicate the problem, I need to look into what might be causing it to see if there is anything I can do to fix it. So please bear with me.

    That said, there are a few things going on here that are causing problems. First of all, when using the local setting, the script populates the clueTip by grabbing the innerHTML of the element whose ID you reference. So, now, any IDs that you have in the initial element are duplicated in the clueTip. This in general is not a good thing. Mileage will vary when you do a getElementById(), since the DOM parser will stop after it sees the first one. Also, you need to set up any event handlers to check for the value only after the particular clueTip has been loaded. Even then, IE6 is giving me a Null value while Firefox is returning the correct value. I don’t have time now to figure out what’s going on with IE (I’m leaving on a family vacation in an hour), but here is what I did to get it to work in Firefox:

    $('a.load-local').cluetip({local:true, cursor: 'pointer',sticky: true,
        onShow: function() {
          $('#cluetip form').submit(function() {
            var testval = $(':text', this).val();
              ($.browser.mozilla) ? console.log(testval) : alert(testval);
            return false;
          });
        }
    });

    Note that I put the even handler in the “onShow” option. Also, since I couldn’t use the form’s ID, I used contextual selectors instead.

    I hope that answers your question, at least partially. There are, I’m sure, much better plugins for this sort of thing. I think it’s kind of stretching the purpose of the clueTip plugin to use it for form handling.

  31. Garrett, one more thing, here is a link to the demo page where I tried this out. Go to the examples section and try #5.

  32. Hi Karl,

    regarding the preloading issue of the images, I recently came up with a solution because I had a very similar problem for a different project. This is how it works: You simply need the count of images inside the cluetip-inner DIV. Then register the load event for each one of the images and decrease the counter. For the last image being ready, display the contents (undisplay the wait.gif before)…

    var imgCount;
    function loadContentswithPreloadingOfImages() {
    	imgCount= jQuery("div#cluetip-inner img").length;
    	//load contents (pseudosyntax)
    	jQuery.load(myUrl, function(){
    		// register load event for every image
    		jQuery("div#cluetip-inner img").load( function(){
    			imgCount--;
    			if (imgCount<1) {
    				// undisplay wait.gif and display contents
    			}
    		 });
    	});
    }

    Hope this helps solving the loading-image problem…

    Cheers,
    Torben

  33. mark

    Karl,

    This seems like a great plugin. What’s the license? Is it GPL/MIT like jQuery or more restrictive like jTip (which I think was under a CC or some other non-commercial/hard-to-swallow-in-a-commercial-product license)?

    Mark

  34. Hi Mark,
    It’s right in the source code :) :
    * Dual licensed under the MIT and GPL licenses:
    * http://www.opensource.org/licenses/mit-license.php
    * http://www.gnu.org/licenses/gpl.html

    Cheers,
    Karl

  35. Hi Karl,

    actually I cannot find v0.8.6 anywhere. Even the new project page only claims to offer it. The ZIP contains v0.8.4. Also the demo page still has v0.8.4…

    Cheers,
    Torben

    P.S.: It’s very kind from you mentioning me in the release notes. Thanks for that. ;) But you somehow misspelled my last name.

  36. Ugh. Sorry about that, Torben. Actually, I’m pretty sure that it is version 0.8.6 there. I just forgot to change the version number in jquery.cluetip.js itself. If you see this line at around 290, you’ll know it’s the right file:
    imgCount = $('#cluetip-inner img').length;

    Also, sorry about misspelling your name. I took it right from your email address, so I’m not sure how I could have messed that up. It must not be Schreiter then. Please send me the correct spelling so I can fix my error. Thanks.

  37. Hi Karl,

    we switched back to v0.8.1, since v0.8.6 even produced the old issue #1 again in a slight variation. Sometimes, an empty tooltip remained sticky even if the link was not hovered anymore.

    From your comment in the bugtracker, I take it you’ve seen the two new issues I posted. Especially the Thickbox-one seems important to us…

    Cheers,
    Torben

  38. Hi Torben,

    The latest version in svn fixes that issue #1 variation. It might even take care of the Thickbox problem, though I can’t be sure because I haven’t set up a test page that uses Thickbox. Which version of Thickbox are you using?

    I’m going to package up a new release as soon as I can, but in the meantime, if you want to try the svn version, it should be more reliable than anything else released thus far.

  39. Thanks, that’s good to know. We’ll be testing it in the coming weeks.

    We’re currently still on quite an old version of Thickbox (v2.1). Everything else with the Thickbox is stable except for the tooltip issue. So, there wasn’t an immediate need to switch to a newer version of it, yet.

    Torben

  40. Erik

    Thanks for the great plugin.

    To make cluetip insert an iframe behind it is very simple if you use the bgiframe plugin and add modify cluetip.js as following


    $cluetip.bgiframe();
    // trigger the optional onShow function
    defaults.onShow($cluetip, $cluetipInner);

    Erik

  41. Thanks for that, Erik. But if you use the bgiframe plugin, why not add your own line of code in a separate file that is included after jquery.cluetip.js? You could just do $('#cluetip').bgiframe(); inside your $(document).ready(). Or maybe I’m missing something?

  42. Erik

    Yep, you are right but it’s an extra step, an easy one but still an extra step that is needed to make the plugin work correctly in ie. If you are already planning on adding the iframe why not use a plugin that already exists?

    Erik

  43. @djot & @karl:

    regarding:

    4. IE: Opening a clueTip in IE makes all my other images (logos, etc.) flicker (like beeing reloaded).

    this is a rather sad IE 6.0 issue, documented here:

    http://www.mister-pixel.com/#Content__state=whats_the_problem

    with a nice & easy fix:

    http://www.mister-pixel.com/#Content__state=is_that_simple

    if you just want to get rid of the flicker:

    in <head&gt:

    try {
    document.execCommand(“BackgroundImageCache”, false, true);
    } catch(err) {}

    cheers,
    jm

  44. danb

    This doesn’t happen all the time… but sometimes when I click a click activated cluetip link, my CPU pegs and I get the stop/continue script dialog… if I hit continue a few times, eventually it comes out of it and works as expected.. The content of the cluetip is some dead simple HTML and a direct request for the content returns instantly.. 85% of the time everything is fine… cluetip is the only JS on the page and other links created with the same JS expression work just fine on the same page… I’m no javascript wizz… but if anyone has any ideas on how I might easily debug this problem, I’d appreciate it.

  45. Seme1

    How can I DISABLE the cluetips ? Some visitors might not wish to see the tips and so the cluetip might have to be deactivated for some users. When deactivated, there should be NO Ajax calls.

  46. Gerardo Gomez

    Hi Karl,

    Impressive work!! I am trying to implement clueTip in my website but I am running into the following problem. When the clueTip shows up and it happens to be above a combo box, this combo box shows up above the clueTip window. I thought I was doing something wrong in my code so I modified your index.html demo page and added the following html next to your link “simplest example there is” : 12 and I got the same problem. I called this page from different PC’s with no luck but in one of them. I have looked at all the properties for IE and they seem to be the same in PC that works and in the PC that doesn’t. Have you seen this problem before? Do you have any words of wisdom that might help me?

    Thanks,

    Gerardo.

  47. H Gerardo,

    I’m guessing that you’re seeing the problem in Internet Explorer 6. If that is the case, it’s a well known problem. The <select> element will always have a higher z-index than any other element on the page, except for an iframe.

    The good news is that this issue is easily solved with the bgiframe plugin by Brandon Aaron.

  48. Gerardo Gomez

    Karl,

    Thanks for your response. Yes that is exactly the problem I am experiencing. I downloaded the bgiframe plugin and I am trying to figure out how to use it in the jquery.cluetip.js script. I am placing this: $(‘cluetip-outer’).bgiframe(); but I am not sure if it is cluetip-outer the right &ltdiv&gt. Any suggestions?

    Cheers,

    Gerardo

  49. Hi Gerardo,

    Your selector, $('cluetip-outer'), is telling jQuery to look for a tag named “cluetip-outer”. In our case, you can use an ID selector instead: $('#cluetip').bgiframe();

    Hope that helps.

  50. Gerardo Gomez

    Hi Karl,

    Thanks for your input. As soon as I named it as an ID it worked.

    Cheers,

    Gerardo

  51. Hello karl!

    I find your work great, but I have some problems, similar as to.rben has.
    please visit http://www.sportni-klubi.com (remove the dash – Idon’t want this site to be in SE yet)

    if you check the top users tabs on the right you will notice, that whem first tab is loaded, the cluetips doesnt work. On the second tab it is working, and reloading the first tab will work too… I am not sure this is a tabs plugin’s issue or cluetip’s.

    The second thing, the problem like to.rben has… when I do ajax call for cluetips, when I hover the link, and then remove the pointer from the link, the cluetip obviously dissapears, but when the ajax call gets the response, the cluetip reapears again only with empty headings!

    The second problem I am having is that link’s click is not working if the cluetip’s content is from the same address as the link’s href. I am processing the right response to the clutip in my html file, so if the requested handler was from ajax I show one content and if calling the link regularry I display another content. So the same url produces different results. So I had to comment out the line in the plugin where you check the href and ajax destination. It would be nice to have an option so I can disable this behaviour if I like.

    Next problem I am having. When Pointing link’s href to an image (.jpg or another kind) I get as a result an encoded data string and not the actual image!

    Now, some more wishes :)
    1. It would be great to have an option: simple cluetip, just for regular tooltips, only a rectangle with simple border and a text inside. With fadein and fadeout effect.
    2. To be able to set the cluetips behavior so that it moves along the mouse when shown (like regular tooltips).

    Ok, I think this is enough. Oh, and I am using ver 0.9!

    regards

  52. oh, forgot to mention… the 1 wishlist, the simple cluetip behaviour should get the text from the title…

    I know there are other plugins that already do this, but I would like to have one plugin for all instead 5 different plugins!

  53. ken peter

    Is it possible to display the tips at exact the same position, when mouse over on different

  54. elements
  • ken peter

    Sorry, Is it possible to display the tips at exact the same position, when mouse over on different list elements

  • Ian Sorby

    I wanted to have the tips appear after a few seconds as in the application only a noob would need the tips. I was going to use the splitTitle option. I set the hoverIntent interval to 1500 and yep it works fine except that regular browser tooltips appear first (yuck). I used titleAttribute to use something other than title i.e. title1 and sure enough the browser tooltips do not appear before clueTip….. however after clueTip has displayed for the first time the browser tooltips do appear (but only the portion that titleAttribute saw before the delimiter).

    Making this change to the code seemed logical to me (and worked) but maybe I don’t understand what I’m doing (I know nothing about java!)

        var cluetipClose = function() {
          $cluetipOuter
          .parent().hide().removeClass().end()
          .children().empty();
          //if (tipTitle) {
          //  $this.attr('title', tipTitle);
          //}
          if (tipTitle) {
            $this.attr(titleAttribute, tipTitle);
          }
          $this.css('cursor','');
          if (defaults.arrows) $cluetipArrows.css({top: ''});
        };
    

    BTW I love this utility - thanks for all the great work.

  • Can you place multiple “sticky clueTips” on a page?
    Only first instance (a) works for me.

    
    <a id="sticky" href="a.cfm" rel="a.cfm">a</a>
    <a id="sticky" href="b.cfm" rel="b.cfm">b</a>
    <a id="sticky" href="c.cfm" rel="c.cfm">c</a>
    
  • Randy,
    Yes, you can place multiple clueTips of any kind on a page. The important thing to remember is that you create your selector just as you would for any other jQuery method. So, in this case, you’d want to use classes instead of ids, or refer to all links within another element. IDs may not be used more than once on a page. Try changing all instances of <a id="sticky"> to <a class="sticky">, and then in your jQuery line do $('a.sticky').cluetip({sticky: true});

  • Oren Tanay

    Great plugin, I’m working on a demo for my boss right now, but there is one feature that I could really do with. Is it possible to make it so that when an element that triggers the cluetip is moused out, that it starts a configurable timer that can remove/hide a sticky clue tip if the user does not mouse over the cluetip before that timer expires? This would be very similar to the effect you see on amazon.com for the little down arrow boxes they place next to titles of products on their homepage.

    Another desirable feature may be a setting for the Close graphic/text link to be absolutely positionable within the cluetip.

    Thanks again for this amazing plugin.

  • Hi Oren,

    Both of those options are possible with the plugin. Please take a look at the latest version’s API. The delayedClose option is still experimental, but I think it should work well enough. You can set the closePosition option to ‘top’ or ‘bottom’ or ‘title’ and then use CSS to modify the position further.

  • Is it possible to show multiple sticky tips on a page that are visible all the time. It appears that it is designed to support only one cluetip at a time.

  • Hi Rajiv,

    No, unfortunately it’s not possible to show multiple tips at the same time.

  • Hi!

    I’m using sticky clueTips with mouseOutClose and a hoverIntent timeout. One thing annoys me big time.

    If you check http://www.snap.com/ and hover above the “Learn more” link, a “clueTip” will appear. It will disappear after you move away from either the tip OR the originating link for a while. Basically the link and the tip are the same with regards to hovering.

    With clueTip, however, if I hover over a link (possibly accidentaly) and a clueTip appears and then move my mouse away from the link (possibly realizing my mistake), the clueTip will not disappear. I have to move into it and out of it. That’s kinda annoying.

    I’ve tried “forwarding” mouse events from the link to the clueTip, using something like this:
    onShow: function($ct) {
    $ct.mouseover();
    $link
    .unbind('mouseover.forward').bind('mouseover.forward', function() {$ct.mouseover();})
    .unbind('mouseout.forward').bind('mouseout.forward', function() {$ct.mouseout();});

    }

    It doesn’t work, unfortunately, because hoverIntent is checking the actual coordinates.

    Do you have any ideas?

  • Replacing $ct.mouseover(); with $ct[0].hoverIntent_s = 1; works, but it’s ugly nevertheless:
    onShow: function($ct) {
    $ct[0].hoverIntent_s = 1;
    $link
    .unbind(‘mouseover.forward’).bind(‘mouseover.forward’, function() {$ct.mouseover();})
    .unbind(‘mouseout.forward’).bind(‘mouseout.forward’, function() {$ct.mouseout();});
    }

    Here’s my suggestion for a cleaner solution:

    If mouseOutClose is enabled, then:
    – wrap the “invoking” element into a span
    – append the clueTip to that span (now the span contains the invocator and the clueTip)
    – bind the hover to the wrapper span

    Then moving the mouse off the invocator will destroy the clueTip too (unless it’s being moved into the clueTip itself).

    What do you think?

  • Hi,

    first of all thanks for a great plugin.

    I made one small update, which gives more possibilities working with wait image:
    1. In section “load external file via ajax”:

    if (opts.waitImage)
     {
        var html = ((opts.waitText != '') ? opts.waitText + '' : '') + '<img src="' + opts.waitImageUrl + '" alt="" />';
        $('#cluetip-waitimage').html(html).css({top: mouseY+20, left: mouseX+20}).show();
     }

    2. In section “options for clueTip”:

    waitText:         '',          // text, which will be displayed above "loading" image
    waitImageUrl:     '/wait.gif', // you can specify different "loading" image

    Now I’m trying to achieve the same thing like Jaka Jancar.

  • Made one mistake :)

    if (opts.waitImage)
     {
        var html = ((opts.waitText != '') ? opts.waitText + '<br />' : '') + '';
        $('#cluetip-waitimage').html(html).css({top: mouseY+20, left: mouseX+20}).show();
     }
  • Jaka Jancar wrote:

    With clueTip, however, if I hover over a link (possibly accidentaly) and a clueTip appears and then move my mouse away from the link (possibly realizing my mistake), the clueTip will not disappear. I have to move into it and out of it. That’s kinda annoying.

    My solution for this problem (added this code in “Bind Events” section):

    $cluetip.mouseover(function()
    {
        if (opts.delayedClose > 0)
        {
            clearTimeout(closeOnDelay);
        }
    });
  • Jaka Jancar wrote:

    With clueTip, however, if I hover over a link (possibly accidentaly) and a clueTip appears and then move my mouse away from the link (possibly realizing my mistake), the clueTip will not disappear. I have to move into it and out of it. That’s kinda annoying.

    My solution for this problem (added this code in “Bind Events” section):

    $cluetip.mouseover(function()
    {
        if (opts.delayedClose > 0)
        {
            clearTimeout(closeOnDelay);
        }
    });

    How cluetip initialization looks:

    $('span[@showtooltip="true"]').cluetip(
    {
      sticky: true,
      mouseOutClose: true,
      delayedClose: 2000
    });
  • ionline

    I’m using cluetip for around 600 dynamically generated links.
    The code I’m using is:

    $('a.load-local').cluetip({
    cursor:'pointer',
    cluetipClass:'rounded',
    dropShadow:false,
    width:'240px'
    });

    The links look as follows:
    <a class="load-local" href="product_info.php?image='.$product_img.'&br_name='.$row['br_name'].'&name='.$row['pd_name'].'&weight='.$row['pd_weight'].'&dvcode='.$row['pd_dvcode'].'&price='.$row['pd_price'].'" rel="product_info.php?image='.$product_img.'&br_name='.$row['br_name'].'&name='.$row['pd_name'].'&weight='.$row['pd_weight'].'&dvcode='.$row['pd_dvcode'].'&price='.$row['pd_price'].'"></a>

    My problem is that the page takes very long time to load and it looks like the browser is frozen. This happens with all browsers. Is there a better way to load multiple cluetips (dynamically generated) and have them load very fast or not to interrupt the loading of the page (run on the background or load after user’s demand).
    Thank you, your help is precious – I’m kind of stuck with this
    (Maybe there is a better jquery plugin to have that done)
    An example of the page can be found at deliverde

  • ionline

    I’m using cluetip for around 600 dynamically generated links.
    The code I’m using is:

    $('a.load-local').cluetip({
    cursor:'pointer',
    cluetipClass:'rounded',
    dropShadow:false,
    width:'240px'
    });

    The links look as follows:

    <a class="load-local" href="product_info.php?image='.$product_img.'&br_name='.$row['br_name'].'&name='.$row['pd_name'].'&weight='.$row['pd_weight'].'&dvcode='.$row['pd_dvcode'].'&price='.$row['pd_price'].'" rel="product_info.php?image='.$product_img.'&br_name='.$row['br_name'].'&name='.$row['pd_name'].'&weight='.$row['pd_weight'].'&dvcode='.$row['pd_dvcode'].'&price='.$row['pd_price'].'"></a>

    My problem is that the page takes very long time to load and it looks like the browser is frozen. This happens with all browsers. Is there a better way to load multiple cluetips (dynamically generated) and have them load very fast or not to interrupt the loading of the page (run on the background or load after user’s demand).
    Thank you, your help is precious – I’m kind of stuck with this
    (Maybe there is a better jquery plugin to have that done)
    An example of the page can be found at deliverde

  • Hmm. I know someone was able to get the plugin to work in conjunction with the Listen plugin, which simplifies the use of event delegation. He did something like this:

    $("table.sortable").listen('mouseover', 'td', function(){
       $('a.load-local', $(this)).cluetip({
           cursor:'pointer',
           cluetipClass:'rounded',
           dropShadow:false,
           width:'240px'
       });
    });
    
  • Brian Tully

    Jaka Jancar –
    I too am having the same annoying issue with the cluetip not hiding when mousing off of the link calling the cluetip. I too am using hoverIntent, sticky, and mouseOutClose — but this only works if I mouse into the cluetip and then out.

    I tried using your posted workaround as well as Evaldas’ code, but neither seem to work for me. It sure would be great if this type of functionality could be achieved.

    The other hack I attempted was to make the cluetip’s height taller so that it appeared over the invocating link, and then I tried to increase the link’s z-index so that it then appeared above the cluetip (therefore making the link active and visible while still triggering the cluetip hover). However I couldn’t reliably do this, i.e., I couldn’t revert the z-index to it’s original # when the cluetip became inactive. It would be nice if there was an onHide option similar to the onShow option, whereby a function could be called when the cluetip is hidden.

    Anyways, if either you or Evaldas (or Karl!) could clarify on how to accomplish this — I’d be eternally grateful :)

    thanks,
    brian

    Evaldas

  • joniba

    Hey, this is a really awesome plugin, many thanks Karl!

    I have a few issues I wanted to bring to your attention:

    1. In Firefox in an IFrame, the top-bottom positioning does not seem to recognize the bottom of the iframe, so the cluetip is shown beneath the link even if it’s outside the boundaries of the iframe (works in IE7 though). If it helps, I can put together an example and send it to you.

    2. I haven’t been able to get the rounded-corners example to work with the drop-shadow. The shadow apparently appears above the cluetip.

    3. Also with the rounded-corners style, when I combine the “arrows” option with the “mouseOutClose” option, the cluetip is closed when moving the mouse into the cluetip >>through<< the arrow. Perhaps there is some tiny space between the arrow and the cluetip.

    4. Lastly, and also with the rounded-corners style, when using “closePosition: ‘title’”, the cluetip body gets too close to the cluetip title and sometimes overlaps.

    Cheers and thanks again for this great plugin!
    Joni

  • joniba

    I’ll add another issue, though I’m not sure how difficult it may be to reproduce. I’m working completely within an IFrame, I’m not sure if that has anything to do with it.

    Anyway, the issue has to do with the “mouseOutClose” option with cluetips that are loaded via ajax: In Firefox and once in a while in IE7, if I click on one cluetip and without closing it move to another and click on it, the second cluetip appears for the moment >>over<< the link (and mouse pointer) and then immediately disappears (probably because of the mouseOutClose option). This only happens on first load. The second time the link is clicked it works fine.
    Again, if it helps I can put together an example and send it to you.

    Cheers
    Joni

  • garycannone

    Karl:

    I really love the plug in (so much that I am working on xmas eve playing with it).

    The only issue I am having is when I load local content, IE6 does not load images. I am loading a hidden div. It works great on all other browsers for me. I looked for a solution above but couldn’t find one that directly addressed this issue with local content (if such an answer was given and I failed to find it I apologize).

    The page in question is at:

    http://www.autrynationalcenter.org/homepage

  • Monica

    Hi Karl,
    I am using the cluetip plugin to display dynamic content . I am using ASP.NET master pages. The cluetip is on the master page. When a web content form is in the same directory as the master page the cluetip is being displayed. However, if the web content form is inside some other directory the cluetip is not being displayed. I tried putting breakpoints in the page that is being loaded and it goes inside the page code. Firebug in Firefox even displays the request and response for the cluetip and shows it as being loaded. However, it’s just not visible. I do see the cursor with a question mark on the link but the actual clue tip is not being displayed. I have no issues when the web content form is in the same directory as my master page. I have also checked the rel and href tag data for both instances and they are correct.
    Any help will be greatly appreciated!
    Thanks
    Monica

    • Hi Monica,
      It sounds like the stylesheet isn’t being referenced/loaded correctly. Are you referencing it with a relative URL? That might be the problem.

      • Monica

        Karl,
        Thanks very much for your quick response. I have used relative path for the cluetip.css file on my master page. However, I only see the cursor with the question mark on all pages inside a directory.

        Thanks
        Monica

      • That’s right, Monica. The cursor is being set from the .js file. It appears that you’re .css file isn’t being included correctly. If you have Firebug, open it up and click on the CSS tab. Select the cluetip stylesheet from the drop-down list (next to “Inspect” and “Edit”) Is it showing any styles? If not, you’re probably pointing to the wrong path.

      • Monica

        Karl,
        I finally figured out my problem. I had loading an aspx page in the cluetip. This aspx page had a dynamic image. When the image path was specified as ‘~/Images/’+profilepic in the codebehind it wasn’t loading the cluetip at all for the pages outside the master page directory. However, when I changed the image path to
        HttpRuntime.AppDomainAppVirtualPath +”/Images’+profilepic
        It all started working. Bummer!
        Thanks very much for all your help. Cluetip is a great plugin and I love to use it! Great work!
        Thanks
        Monica

  • Ansley

    Hi Karl,
    I want first to thank you for this great tool. I use it in a joomla powered website .But I encounter the scrolling problem (the page height is incrased and the user must scroll to see the remaining part of the tip ).I use the last version of cluetip.

    Thanks in advance
    Ansley
    Port-au-Prince,Haiti

  • Lilian

    Hi Karl,

    I’m using clueTip on area element and you mentioned that one of the bug fixes was

    3. fixed positioning glitch when applying clueTip to an area element; now it positions the clueTip relative to the mouse position.

    From my application, the clueTip is relative to the mouse position but is there a way to position it above the link if there’s not enough space at the bottom. This smart positioning is working fine if the clueTip is applied to a normal anchor element.

  • Greg

    Hi Karl,

    Any plans to create a themeroller-compatible version of cluetip?

  • David

    Hello Karl,

    I’m using clueTip 0.9.9pre4.

    If I use cluetip in this way all is correct:

    $().ready(function()
    {
    $(‘div#tip1′).cluetip({
    width:’450′,
    height:’600′,
    leftOffset: -400,
    activation: ‘click’,
    cluetipClass: ‘jtip’,
    arrows: false,
    dropShadow: false,
    //hoverIntent: false,
    sticky: true,
    //ajaxCache: false,
    positionBy: “mouse”,
    attribute: ‘rel’,
    waitImage: true,
    fx: {open:’fadeIn’},
    closePosition: ‘title’,
    closeText: ”,
    //draggable: true,
    //ajaxSettings: { type: ‘GET’}
    });

    But I need to use your plugin with OpenLayers and if I user clicks on a point I show the tooltip and I change dynamically the rel value:

    Part of the JS function call from when the user clicks on a point

    }else if (document.createEvent){

    $(“div#tip”).attr(“rel”, html_page).cluetip({
    width:’450′,
    height:’600′,
    leftOffset: -400,
    activation: ‘click’,
    cluetipClass: ‘jtip’,
    arrows: false,
    dropShadow: false,
    sticky: true,
    positionBy: “fixed”,
    attribute: ‘rel’,
    waitImage: true,
    fx: {open:’fadeIn’},
    closePosition: ‘title’,
    closeText: ”,
    //draggable: true,
    //ajaxSettings: { type: ‘GET’}
    });
    $(“div#tip”).click();
    }

    If the waitimage is false the tooltip is shown else the waitimage enters in a loop and the tooltip is not shown(ajax response is 200 OK)
    This is because the Event.mouseY-X is undefined and the “problem” comes from this function: $(‘#cluetip-inner img’).load(function() (line 200)
    Any ideas?
    Thanks!

  • spence

    Thanks for a great plugin! I’m having a problem with displaying content in any browser other than FF. IE7, IE8, Win Safari and MAC Safari do not work.. FF3 and FF2 on Win and MAC both work.
    I am using the following files
    jquery core 1.2.6
    cluetip 0.9.8
    dimensions 1.2 (both with and without)

    Code Example:
    HTML

    <a id="knit_designing_is_easy1" style="color: #333; font-size: 0.75em;" rel="class_description.php?id=21&type=cd" title="Class Description" href="#">Class Description</a>

    Jquery

    $('#knit_designing_is_easy1').cluetip({sticky: false, width: 500, closePosition: 'title', arrows: true,});

    Any help would be greatly appreciated..

    • Hi Spence,
      you have a trailing comma in the options object; remove it and you’ll be fine:

      $('#knit_designing_is_easy1').cluetip({
          sticky: false,
          width: 500,
          closePosition: 'title',
          arrows: true, // <-- remove that comma.
      });
      
      • Hi Karl,
        I am having same problem of showing the tooltip content in safari and IE. It shows the tip and no content in it. It does work well on FF. An clue will be of great help
        jQuery(‘#anchor-link’).cluetip({
        local:true,
        cluetipClass: ’rounded’,
        arrows: true
        });
        I am trying to get content from hidden div described in rel of anchor link. I can paste that code if you need it.

      • Hi Duffers,
        Actually, if you have a test page I can look at, that would be great. Feel free to send me more info via the contact form. Thanks!

  • I am trying to make the popup ADA-compliant. One of the requirement is that the focus should be transferred to the cluetip when displayed so that the user can use the close url in my clutip’s title. I tried using the onshow() event handler as:

    onShow: function(ct, c){ct.focus();

    But this does not seem to work because if the focus was truly set then a tab should take me to the ‘close’ link.

    Any suggestion? Thanks.

    • Hey George,

      I’m not sure if this works cross-browser, but you could try adding a tabIndex attribute to the cluetip:

      onShow: function(ct, c) {
        ct.attr('tabIndex', '-1').focus();
      } 
  • Hello Karl,
    I use cluetip with Drupal to show a form. This works perfectly, but when i click in the cluetip to the submit button the uses ahah event of drupal didn’t show me the progress bar. So I found out that the progress bar is shown in the hidden form on the website but it didn’t appear in the cluetip. When I reload the cluetip by going to the link again to force the reload of the cluetip the progress is shown. How can I force this directly without closing the cluetip and reopen it? Any ideas for me?

    Thx for your plugin really useful and almost simple to use.
    Greetings frank

  • Hey Karl I solved the problem!
    I deletet .clone(true) and it worked fine for me, but I think that’snot the best solution!
    Could you integrate an option like clone: (true/ false) ? This should release some problems maybe for others too?

  • PS: The deleting of clone(true) results in that the form is deleted from the DOM after closing the tooltip. Maybe you have an better Idea for showing the original content without deleting them after closing the clue tip. So don’t delete clone(true) this results in an empty cluetip.

  • Karl: Hey there. I was wondering is there an option that will force the tool tip to make the ajax call every time. I noticed now it only does it on the first load. I put an editor inside the tool tip; the edit works but then when you open the tool tip again; it does not show the new value. Thanks.

  • Sorry, but comments for this entry are now closed.