clueTip Plugin Beta 2
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
- the
waitImagefeature/option is now implemented for ajax-loaded clueTips - 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.
- added a
dropShadowoption that adds a drop shadow to the clueTip. Default is true - the clueTip heading (
<h3>) now comes before<div id="cluetip-inner">, not inside it. This should make it much easier to apply sane CSS. - added alternate theme based on Cody Lindley’s jTip, and created demo files to show it (alt-demo.html, et. al.)
- added an
arrowsoption 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. <div id="cluetip">now getsclass="clue-left"if positioned to the left of the hovered element andclass="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
- changed
$(document).width()to the more appropriate$(window).width()for positioning the clueTip’sxcoordinate. - changed the clueTip’s height calculation to occur after
truncateandtipTitleoptions are considered so that positioning will be more accurate and drop shadows will be applied correctly. - fixed positioning glitch when applying clueTip to an
areaelement; now it positions the clueTip relative to the mouse position.
Still to do
- Insert an iFrame behind the clueTip to prevent the select list from poking through in IE6.
- 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.



July 21st, 2007 at 1:19 pm
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 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
July 22nd, 2007 at 7:36 pm
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 thehref.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
July 22nd, 2007 at 11:19 pm
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 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
July 23rd, 2007 at 10:35 pm
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 to97, because it looks like Thickbox 3 is setting itsz-indexto100.July 24th, 2007 at 2:13 am
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
July 24th, 2007 at 1:14 pm
Thanks for the further explanation, to.rben. I can reproduce it now. Will keep you posted.
July 27th, 2007 at 1:46 am
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!
July 29th, 2007 at 10:24 am
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.
July 30th, 2007 at 5:58 am
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
August 1st, 2007 at 11:48 pm
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
August 6th, 2007 at 3:25 am
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
August 6th, 2007 at 9:05 pm
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.
August 6th, 2007 at 10:13 pm
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:trueparameter? Doesn’t that have any effect on the jumping?Thanks for bearing with me while I try to track this down.
August 7th, 2007 at 5:43 am
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
August 7th, 2007 at 8:54 am
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.
August 7th, 2007 at 9:22 pm
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!
August 9th, 2007 at 6:20 am
-
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
-
August 9th, 2007 at 8:27 am
Excellent suggestions, djot. They are going on my todo list right away.
August 9th, 2007 at 10:41 am
-
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
-
August 9th, 2007 at 12:21 pm
Editor’s note: comments by djot have been consolidated into this one.
August 9th, 2007 at 9:29 pm
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
ajaxSettingsoption.#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.”
August 10th, 2007 at 1:02 am
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
August 10th, 2007 at 10:00 am
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
waitImageoption has a value. That way, you can change the default value ofwaitImageto''orfalsein the plugin itself or add{waitImage: ''}or{waitImage: false}to theclueTip()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.
August 11th, 2007 at 7:21 am
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
August 11th, 2007 at 10:05 am
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.
August 12th, 2007 at 2:42 pm
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.
August 16th, 2007 at 3:15 pm
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?
August 16th, 2007 at 3:32 pm
Hi Brennan — for that, you’re probably better off looking at a different plugin, such as jqModal.
August 17th, 2007 at 12:14 am
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.
August 17th, 2007 at 9:46 am
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:
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.
August 17th, 2007 at 9:48 am
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.
August 21st, 2007 at 8:16 am
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)…
Hope this helps solving the loading-image problem…
Cheers,
Torben
August 23rd, 2007 at 3:47 pm
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
August 23rd, 2007 at 4:08 pm
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
August 30th, 2007 at 9:28 pm
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.
August 30th, 2007 at 10:52 pm
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.
September 3rd, 2007 at 8:32 pm
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
September 4th, 2007 at 9:45 am
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.
September 4th, 2007 at 9:12 pm
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
September 7th, 2007 at 11:25 am
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
September 7th, 2007 at 2:46 pm
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?September 14th, 2007 at 12:59 am
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
September 14th, 2007 at 2:02 am
@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>:
try {
document.execCommand(”BackgroundImageCache”, false, true);
} catch(err) {}
cheers,
jm
September 17th, 2007 at 10:02 pm
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.
October 9th, 2007 at 9:09 am
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.
October 29th, 2007 at 4:43 pm
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” :
12and 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.
October 29th, 2007 at 4:50 pm
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.
October 29th, 2007 at 5:32 pm
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 <div>. Any suggestions?
Cheers,
Gerardo
October 29th, 2007 at 7:28 pm
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.
October 30th, 2007 at 3:34 pm
Hi Karl,
Thanks for your input. As soon as I named it as an ID it worked.
Cheers,
Gerardo
November 2nd, 2007 at 5:19 pm
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
November 2nd, 2007 at 5:35 pm
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!
January 9th, 2008 at 1:39 am
Is it possible to display the tips at exact the same position, when mouse over on different
January 9th, 2008 at 1:41 am
Sorry, Is it possible to display the tips at exact the same position, when mouse over on different list elements
March 3rd, 2008 at 9:42 am
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.