HelpBalloon.js version 2.0
March 2nd, 2008
I’ve completed my updating of my aging AJAX help balloons / tool tips / dialog balloons / whatever you want to call them.
New features included:
- Less library dependence. It’s still prototype.js-based and dependent, but no longer requires Scriptaculous nor the prototype “improvement” script that they previously used. You can optionally still use Scriptaculous if you want the sexy fading effects. Just include the scriptaculous.js file in your document and the balloons will detect it and use it, no configuration needed.
- Use any object as an anchor point. This was available in later revisions of v1, but I’ve solidified it’s support. Simply assign the anchoring element as the balloon’s icon property at instantiation. (See the example page for details)
- Anchor postioning control. This feature allows you to move the anchor around within your icon for fine-tuning the balloon’s display. (See the example page for details)
- Non-caching remote data requests. If you’ve ever tried to use v1 of the balloons with dynamic data, you’d know that once the balloon makes it’s first request, it caches the request result and would not make subsequent calls for fresh data. You can now force the balloon to make a fresh request before each showing using instantiation options. (See the example page for details)
- Fixed direction assignment. By default, the balloons will position themselves based on available realestate, but you can now assign a fixed direction using instantiation options. (See the example page for details)
- Still 100% free, now released under the MIT open source license.
- Better organized and fully commented/documented code. This was a complete refactor/rewrite of the code base, and I made sure to comment the code very thoroughly and try to explain my reasoning (or insanity) as best I could. In addition, I’ve written a proper API page, and have revisited the examples page.
As always, I’m eager to hear feedback — be it wishes, comments, praises or curses. Thanks to all that provided feedback on v1, it was tremendously valuable.
Click here to download the full widget (includes images, HelpBalloon.js, prototype.js 1.6.0.2, and scriptaculous 1.8.1) 200k zip.
March 5th, 2008 at 8:21 pm
Hi,
Great job on the help ballon!
One question only…how can I have larger title string on the balloon without getting it hidden?
Thanks in advance
March 14th, 2008 at 11:59 am
another question. Can you interact with the balloon and then have it disappear on mouseout?
March 16th, 2008 at 2:29 pm
Hi,
How do I resize the balloon? I tried the ,
balloonDimensions : [100,50] but no luck.
PS. Great work…!
March 16th, 2008 at 5:06 pm
Hi,
great work btw!, i have another question….
when creating your own custom balloons is there a way to offset the x & y for actual balloon in relation to the icon, as my anchors are located in the middle
thanks
March 17th, 2008 at 5:46 am
Beau,
thank you very much for this flexible and well-documented tooltip!
I am trying to change it so to have a much bigger bubble (500px by 500px) right now. I will get back to you with the results / problems
March 17th, 2008 at 7:07 am
…well, I found out by just replacing the balloon .png with a bigger one, it works out of the box.
Wow! Thank you so very much for this script.
The only thing I now need to do is to show an ajax loading indicator for my ajax - balloons.
What I would like to do is show that indicator overlaid over the anchor of the balloon, once I click it. Then, when the balloon content is ready, it will be hidden. For some of my ajax content, the load is pretty heavy and I need to entertain my users for the 1-2 seconds the pulling of html content takes.
Any ideas how I can automatically place that loading indicator at the spot I clicked?
March 19th, 2008 at 2:34 am
I want to load the ballon in a dynamic peace of ajax.
But the innerfunction will not allow load javascript within ajax.
I Mean, i have a button for MyBla. Clik on it and the page will be loaded dynamical. in this php code i put the ballon. Within the dynamic page i need at least 5 helpballons.But the javascript will not be executed. any ideas?
March 21st, 2008 at 7:52 am
Hi,
I have uploaded the helpballoon folder on a windows 2003 server but the page doesn’t show the “i” icon so to click on it and show the balloon. Do I have to install any components on my server to run AJAX?
March 24th, 2008 at 10:12 am
Hi,
great tool. Is there a way i can make the balloon to popup upon an hover on a hyperlink, instead of forcing an icon?
I tried but could not figure a way to avoid using an icon
thanks
March 24th, 2008 at 11:39 am
oh well - i figured it out - a similar feature was right there in an example - thanks for the great tool and even better examples
March 24th, 2008 at 11:47 am
Hi
This is a wonderful tooltip….Great Work….
I have a small issue…when i try to resize the balloon by specifying the dimensions it doesnot seem to work….even i tried replacing the ballon with a smaller one….no luck………any idea why thats happening….
Thanks
Suba
March 26th, 2008 at 7:10 am
Can you think of any reason why the popup balloons are not shown in Internet Explorer but they are fine in Opera and Firefox? Everything else works fine when you click on the icon (text works, even using .xml as its source, and the format is correct, just missing the balloon image). A pathing issue that IE doesn’t like maybe?
March 26th, 2008 at 7:31 am
As a follow-up to my last comment, I discovered that there is an issue with IE using PNG images with alpha channels. Is this what is causing the problem, and if so will you publish new .png images and/or a way to fix the issue? I’m including the URL and the text I’m referring to below. Thanks!
http://www.gmod.org/wiki/index.php/Popup_Balloons
Note: Internet Explorer
The balloon body image is in PNG format with alpha channels. This file format is required for the semi-transparent shadow. Older versions of internet explorer do not support this feature (support was added to version 7). In the default configuration, an alternative image without a shadow if substituted is IE version
March 26th, 2008 at 8:01 am
Jason:
I’d be interested to know what version of IE you’re having difficulties with. I’m looking at the example page and it works fine in IE7. Also, the script already uses the PNG alpha-channel workaround so that wouldn’t be the issue. If it was, you’d see a black background behind the balloons.
Let me know,
Beau
March 26th, 2008 at 3:48 pm
After doing further testing, it does work just fine with the same computer (IE 6.0.2800.1106 for the record) if I use static .html (via apache) and the same scripts. The problem occurs when I use it in a java servlet (via JBoss) using .xsl. Maybe it’s being served but IE interprets it differently than Opera/Firefox. I’ll look into it more and see what I can come up with. Thanks for the quick response.
March 26th, 2008 at 3:54 pm
Ah, that makes sense.
XMLHttpRequest objects are sensitive to what the document type is from the server’s response. It dictates whether the responseXML or responseText are populated. Be sure the expected response type is set.
However, now that I think about it, there might be an issue when trying to read XHTML that is served with an XML doc type. I’ll have to do some testing on this and get back to you.
Beau
March 27th, 2008 at 12:42 am
Great tool!
I have 1 problem though. My balloon image is 650×200. When I run it, the balloon is truncated. The entire 650×200 is not displayed. Is there something I am missing?
March 30th, 2008 at 11:26 am
Hi,
I’m sort of new to this, and I like the mouseover technique.
How the heck does one install this? I’ve always been curious, and I copied the mouseover code from the example page, but obviously there is more to it than that……
Thanks in advance!
Arthur
March 31st, 2008 at 5:34 am
Beau,
going back to my first posting, I am struggling to make this happen:
Whenever I click the anchor of a help balloon (An ajax help balloon), I want to show a small activity indicator on top of the anchor I clicked.
What I can do is set up an ajax activity indicator that appears whenever there is some ajax activity and dissappears once the content is ready.
What I can not figure out is
1) find out how to place the gif at the coordinates of the anchor (preferably the center)
2) how to make it appear on top of the anchor where ever on the page that is.
I understand this is not exactly on topic but I think an Ajax help balloon needs this, as it can take a few seconds before the balloon pops up and that delay might be irritating to some users.
Pls help!
April 2nd, 2008 at 8:00 am
Everybody has already told it, it’s really a great library.
Is it possible to use it without a background image ?
April 2nd, 2008 at 11:27 am
I have been looking for something like this for a while now, thank you. Can this be used with an image map? If so, how?
April 4th, 2008 at 1:50 am
Thanks for creating a great application. Two questions though: I’m using it on mouseover, how do you get it to disappear on mouseout, it kinda just stays there until you click the ‘x’. Also is there a way to delay the balloon popup on mouseover, i have many popups on one page and the user might get annoyed if they are sliding their mouse around and all these balloons popup, if there was a way to do like a one or two second delay that would be cool. I’m using a different icon which is quite large, so this happens a lot during testing.
April 9th, 2008 at 7:40 am
Great tool!!
But I can’t for the life of me figure out how to change the dimensions of the baloons. I see balloonDimensions in the documentation, but I can’t get it to accept anything I try.
A quick tip on that would be much appreciated.
April 10th, 2008 at 10:43 am
Can you please help me with the dimensions? Where do i specify them?
thanks for a GREAT great tool.!!