HelpBalloon.js version 2.0
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. (However, if you want to use different Scriptaculous effects than the standard Fade and Appear, you can set the hideEffect and/or fadeEffect options to whatever you want… Doesn’t even have to be Scriptaculous, just Scriptaculous-compatible)
- 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) 556k zip.
Or you can get the latest via SVN: svn://beauscott.com/widgets/HelpBalloons
Click here for the Example Page
Update: I’m right in the middle of adding new feature documentation, so the docs are a little wonky. I’ll fix shortly.
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
another question. Can you interact with the balloon and then have it disappear on mouseout?
Hi,
How do I resize the balloon? I tried the ,
balloonDimensions : [100,50] but no luck.
PS. Great work…!
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
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
…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?
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?
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?
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
oh well - i figured it out - a similar feature was right there in an example - thanks for the great tool and even better examples
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
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?
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
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
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.
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
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?
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
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!
Everybody has already told it, it’s really a great library.
Is it possible to use it without a background image ?
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?
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.
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.
Can you please help me with the dimensions? Where do i specify them?
thanks for a GREAT great tool.!!
Beau-
Thanks for writing this, it has helped me a lot. I do have a (difficult?) feature request. Variable height Help Balloons. I realize you’d have to do a lot of reworking to get away from the current fixed size images but it would be well worth it for those awkwardly long (or short) help texts.
Love what you’ve done so far, keep it up!
-Jerod
Hi Beau
First off, great control, and kudos on the API and documentation.
The balloon works great except for one issue. I have a custom anchor, and have disabled caching by attaching a guid to the dataURL, as I found that when using cacheRemoteContent the server is hit with many (> 10) request per balloon, which impacted on performance. The issue is, when I close a balloon and then open the same one immediately after, TWO balloons are opened on top of each other, and the user experience is that you have to close the balloon twice before it closes. Any advice?
I can’t figure out how to get long titles to display (instead of cutting off). I’ve tried resizing the .png but that did not work. Anyone know what to do?
Hi Beau,
Love the script! I got it up and running with no problems and it looks gorgeous. I’d love a balloonDimensions example so that I can resize the balloons if you have one. Other than that it is a thing of beauty.
Muchas gracias!
As a follow up to my issue above with the balloon images not being displayed, I’ve fixed the problem on the client computer running Internet Explorer by applying the ‘Update for microsoft core xml services (msxml)6.0 service pack 1′ via Windows Update. The URL for the update is here:
http://support.microsoft.com/kb/934268/en-us
I hope this helps, thanks!
Hi there,
thanks for this great script.
I have few questions:
1) I’m using a large image as anchor for multiple balloons, but I want to have one one visible at time. How can I destroy/delist the former balloon at the time I’m creating the new one or in alternative how can I update the coordinates of the existing one?
2) I read related questions to update the coordinates and content of the baloon, it would be great to see an example added to you tutorial.
Thanks again
Alex
Great Tool.
How can I pass dynamic value to the dataURL? Depending on the value entered by the user, I have to populate information in the balloon.
Please let me know.
Arun
[...] Help Balloon - Help balloon from BeauScott [...]
hi, I am using Ajax baloon in my asp.net project. The only issue that i am facing is when i am placing it within the update panel. The icon gets disappered when the update panel updates.
I have tried all sort of ways ..but could not succeed.
Please advice me how to deal with this …. Thanks
Great looking tooltip. It is just what I have been looking for. My only issue is after I submit the page (using an AJAX update panel) the javascript seems to stop working and the tooltip does not show. Am I missing something? Any help would be great because I would really like to use this great looking control! Thank you.
This seems good product except I am new to Dreamweaver CS3. I have downloaded ‘HelpBloon’. Now I have no idea how to install the package!!
Do I copy the files to the Dreamweaver CS3 folder or what?
PLEASE HELP!
Has anyone figured out how to change the balloon’s dimensions or get them to close automatically without selecting ‘X’?
I just ran across you blog this morning. Just want to say thanks for all the interesting information I didn’t even know I needed. Keep up the good work, Scott
As everybody already said: Great Script! Thanks a lot.
But still I have difficulties concerning the balloonDimensions. Either they don’t work or I am too stupid ;-). Maybe you can add this one to the examples page since more people are wondering about how to use this property.
Thank you.
Hi, i’ve just started using your very good baloon library and i’ve some problem regarding the z-index of the baloon. They appear on back of my container!
There’s a way to change the z-index directly when I create the baloon? I haven’t undestand how to change the style at runtime… Thanks in advance. Very good software 
how can i change the dimensions of the balloons ?? PLEASE HELP !
Currently the size of the balloon is dictated by the size of the background image. I know this seems backwards… Then next release will include scaling. (I’m hoping to have this done by the end of the month)
Beau
balloon images are not getting displayed…
on IE7 as well as on FireFox…
can anyone help or faced the similar issue ?
In FF it says :
Warning: Expected end of value for property but found ‘)’. Error in parsing value for property ‘background’. Declaration dropped.
What’s the problem …. ?
this is great, i you can put images into the tooltips also, great script for those who don’t wish to over clutter their forms etc..
great thanks!
hi,
Great work.
if I create balloon toolitip inside an iframe, it will not be positioned correctly in firefox.
I modified the code as below
/* var ww = Prototype.Browser.IE ? document.body.clientWidth : window.outerWidth;*/
var ww = Prototype.Browser.IE ? document.body.clientWidth : window.innerWidth;
Now it works on both IE7 and FF
How can I pass a dynamic value to the dataURL? Depending on a value entered by the user, I have to populate information in the balloon from an external .jsp and I want to send that external .jsp file the value through the dataURL.
Is that possible with this tooltip? Any ideas?
Hi,
I was wondering if there was a way to delete balloon instances when the user closes out of the balloon? When I click on a tooltip anchor multiple times, all balloon instances are being stacked which causes the user to have to close multiple balloon instances each time.
Thx in advance
[...] Nome: Help Balloon Descrição: Inclua balões com informações auxiliares em seu site Download: http://www.beauscott.com/2008/03/02/helpballoonjs-version-20/ [...]
Beau
hows the status on changing the size of the balloon?
please release a new version fast
since now its worthless if you can’t resize the thing
Hi,
Thank you for this great scripts.
I was wondering if there was a way to show the balloons outside an iframe if the icon is inside the iframe?? Any idea??
Arul.
Hello!
Great work but i have a question. With which browsers ist the Helpballoon compatible?
Is it also compatible with IE 6 ?
Please answer me!
Thanks!
Alex
Hi,
Thanks for this great script.
I was wondering if there was a way to show the balloon outside an iframe if we set the icon inside iframe?? can anyone help??
Thanks before.
@Alexander Prinz
Hi Alex, I just try this script with 3 browser. IE, Firefox and Opera. Everything is Ok. This is realy cool script. Try it!
Hi Beau,
Great script, works really well…
I have discovered a problem in IE 6… if you add a form item i.e. input, select or button it show through in the middle of the balloon.
This is bound to be a problem with the way that IE handles the DOM, i think I have found a workaround by layering an iframe underneath the balloon… this feels like a bit of a hack so it might be something that you want to look at fixing in another release…
Great work
G
The question I have is how would I call a specific batch of info from an xml file? The idea is to put all the help item content in a single XML file and then read the appropriate piece when you mouse-over the info icon. I don’t want to create a million little xml files.
Thanks!
Uh oh. Using this in an asp.net website and in a Multiview control. Seems to work fine in the first view but as soon as I load the second view, all the icons are gone. Not sure what the problem is.
And there has to be a way to call data in from a single file for multiple help balloons and point to specific data for the particualar icon/control.
Resizing of this balloon would be useful. I tried editing the graphic and I changed the height of the balloon but it still displayed using the same size container. Maybe someone can point me to where in the js the container dimensions are figured so I can resize my balloon.
Thanks!
Great script! The only thing I cant figure out is a hide on mouseout. Is there an easy way to make this happen?
Any idea when the “balloonDimensions” property will be supported?
Without it, this becomes rather worthless.
I hate you see you put so much effort into this, Beau, only to not finish it.
Very nice script Beau!
For some reason, even when I resize the background image in IE6, it doesn’t resize the balloon properly (though it does great in Firefox)
I know you are working on this and even on scaling in your next release.
In the meantime, I think I see how you were originally using balloonDimensions, so I tried to re-enable that feature in order to force the dimensions to work in IE6.
1. line 675 comment out the code that sets the dimensions to the width of the image
// this.balloonDimensions[0] = this._lastBalloon.width;
// this.balloonDimensions[1] = this._lastBalloon.height;
2. line 1147 at the bottom of HelpBalloon.Options add a new parameter:
balloonDimensions: [0,0]
3. line 238 set the balloonDimensions when the balloon is initialized:
this.balloonDimensions[0] = this.options.balloonDimensions[0];
this.balloonDimensions[1] = this.options.balloonDimensions[1];
4. that’s it. then just create a new balloon object and pass it balloonDimensions:
var hb4 = new HelpBalloon({ balloonDimensions: [900,300] });
pls any one just do one small help. How to use this in asp.net.if u give coding it will be great….!
Thank to all
Hey, great job on the helpballoons - thanks so much for making this available. I know you get what you pay for but can I make one request - keeping in mind I really appreciate your work, but …
PLEASE - RESIZE - this is really needed or the balloons are only working at about 25% of what they could be. Looks like the tag in the documentation is not working:
balloonDimensions: [200,300]
PLEASE release an update - there are FIVE other comments above asking for this… again, you have done great work, got paid nothing, thanks much… just go for this one update and you’ll have something great tons of people will use!
Thanks again!
hi, great work, i wonder if is a posibility to use the onmouseout functions, i want when i mouseover to show and when mouseout to hide.
please help me, i canot figure the last thing, the mouseover work great
<a href=”#” id=”" onclick=”return false;” style=”color: #FFFFFF; font-weight: bold” >Quick Info!
var hb5 = new HelpBalloon({
title: ‘Product Information’,
content: “Product Name: Product Code: Production Studio: Avaible Stock: (without cart items!)”,
useEvent: ['mouseover'],
icon: $(”)
});
Event.observe(”, ‘mouseout’, hb5.hide.bind(hb5));
So… anyone figured out how to resize the balloon’s dimensions? I’m stuck too.
Is Beau on holidays?
Any help? Please?
OK, so I’ve got either a workaround, or maybe how the resize is supposed to work (special thanks to my colleague Caley for figuring it out):
So, the image width and height (of the speech bubble) is dynamically grabbed and the tooltip is sized accordingly. If you want to create different sizes, make balloon-alt’s of all four images with the size you want. Then, when you’re calling the balloon, add this:
balloonPrefix: ‘../images/tooltip/balloon-alt-’
Where the stuff in the quotes is everything before the 0,1,2,3 numbers of the alternate balloons you should have created.
And so, on that note, while it is dynamic, it just might not be the dynamic you were thinking of - hats off to Mr. Scott for a great little library!
Great little script but balloonDimensions doesn’t seem to work.
Hello Beau!
Thank you for the scripts! I have one question, could you please help me? My page has multiple controlls with the same ID. Is it possible to use this script in this schenario? Right now, what is happening is that - if there are 30 hyperlinks with the same ID in the page, then 30 balloons are diplayed 0ne over another when the first hyperlink is hovered over, for the rest it is a java script error!
How can I make this script work in this scenario?
You answer will be heartily appreciated.
Thannks!
I have done some modifications to the file “HelpBalloon.js” and created a new bigger balloon-graphic for one position. With this mod I’am able to display the normal sized balloons and one bigger balloon in position “bottom_left”. It should be no problem to add more and different sized balloons in the same way.
Additionally I’ve added a new option for each balloon to identify the part within the XML file where the content of all balloons is saved. You will need only one XML file to store the contents for all of your balloons! The new option is called “no”. This option is set to a string with any content you want (i.e. ‘balloon1′). In the XML you have to set a part with “” and “” the define the content for this balloon.
1. First I have added a news position with id 4 and named it “POS_BOTTOM_BIGLEFT” (add this in the position-definition (ca. line 60)):
/**
* Enumerated value for the bottom-left rendering position.
* @static
*/
POS_BOTTOM_BIGLEFT: 4,
2. Add the definition for the new option “no” (ca. line 210-220):
/**
* Number for HelpBalloon (used for identifiying the XML-Part)
* @var {String}
*/
no: null,
3. Modify the preload-function (ca. line 240-260):
//
// Preload the balloon and button images so they’re ready
// at render time
//
// 0 1
// X
// 2 3
//
this.balloons = [];
for(var i = 0; i < 5; i )
{
var balloon = new Element(’img’, {
src: this.options.balloonPrefix i this.options.balloonSuffix
});
this.balloons.push(balloon.src);
this.balloonDimensions[0] = this.options.balloonDimensions[0];
this.balloonDimensions[1] = this.options.balloonDimensions[1];
}
4. Add the new position within the pos-calculation (ca. line 260-280):
case 4:
zx = this.balloonCoords.x - this.balloonDimensions[0];
zy = this.balloonCoords.y;
break;
5. Modify the XML funtion (ca. line 660-690):
if(doHTML)
{
// Attempt to get the title from a HTML tag, unless the title option has been set. If so, use that.
if(!this.options.title)
{
matchTxt = ‘/\([^\<] )\/gi’;
var htmlTitle = cont.transport.responseText.match(matchTxt);
if(htmlTitle)
{
matchTxt = ‘/\|\/gi’;
htmlTitle = htmlTitle.toString().replace(matchTxt, ”);
this._titleString = htmlTitle;
}
}
this.options.content = cont.transport.responseText;
}
}
6. Change the dimension-vars (ca. line 680-700):
// this.balloonDimensions[0] = this._lastBalloon.width;
// this.balloonDimensions[1] = this._lastBalloon.height;
this.balloonDimensions[0] = this.options.balloonDimensions[0];
this.balloonDimensions[1] = this.options.balloonDimensions[1];
7. Create a XML file with all of your balloon-”no”s (example):
TITLE FOR BALLOON 1
<![CDATA[
Content for ballon 1
]]>
TITLE FOR BALLOON 2
<![CDATA[
Content for ballon 2
]]>
8. You always have to add the option “balloonDimensions” and “no” in every balloon creation. The dimensions (i.e. [600,300]) depends on the size of your bigger balloon graphic. The size of the original balloons is [300,240]. (example (balloon1 is my own bigger balloon, ballon2 is an original-sized balloon)):
$balloon1 = <<<CODE
new HelpBalloon
({
dataURL: ‘help.xml’,
no: ‘balloon1′,
balloonDimensions: [600,300],
fixedPosition: HelpBalloon.POS_BOTTOM_BIGLEFT // 4
});
CODE;
$balloon2 = <<<CODE
new HelpBalloon
({
dataURL: ‘help.xml’,
no: ‘balloon2′,
balloonDimensions: [300,240],
fixedPosition: HelpBalloon.POS_BOTTOM_LEFT // 3
});
CODE;
—————————————————–
You have to add new positions and graphics for each balloon you want to display with other sizes. My new balloon in this example is sized “600 x 300″ pixels and named “balloon-4.png”.
I’m not sure if this is the best solution for resizing the balloons, but I’ve never done something with javascript before, so I think it is ok.
Sorry, the comment filters some code-content, so my comment before is not completely displayed.
I’ve uploaded my modified files here: http://bulitipp.eu/files/mod_helpballoon.zip
Hi, has anyone found a solution for the configuration of the z-index. I am using this library together with jCarousel and the images of jCarousel are displayed on top in Firefox 3. However, with IE7 it is fine.
Resize? Oh please - I love your help balloons - once they are resizable they will be UBIQUITOUS… please hook us up!
Got a beta build? Seems everyone is looking for this…
Hello,
Great script.
It doesn’t seem to be compatible with the moo-tools framework though. prototype.js seems to kill mootools. Any idea why?
[...] HelpBalloon [...]
Beau, very nice script.
I tried to implement a tooltip myself with scriptaculous just by defining a hidden div and using the effects Appear/Fade. I am using a png image with alpha transparency as a background image for this div. What I noticed is that IE shows a black border during the Appear/Fade effect. I applied the following css to the div:
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’graphics/tooltip.png’, sizingMethod=’scale’);
This made the png display right in IE 6, but still I have no luck with getting rid of the black border.
However, I noticed that your script doesn’t have the problem. What is the fix you used? Do you have to add the alpha transparency filter to the script and not just the css?
Is there a way to change the body text alignment. Instead of centered I would like to have it left justified. I looked through the API information and found “content” and “content margin” but did not find anything on alignment or justification.
TIA,
Hi, i’ve just started using your very good baloon library and i’ve some problem regarding the z-index of the baloon. They appear on back of my container!
and an other problem:
The html select are over the balloons
There’s a way to change the z-index directly when I create the baloon?
Thanks in advance.
Very good job
Hi,
nice tool. I am having a problem with IE6 (6.0.2900). Form elements underneath the balloon are not hidden. I tried to set the option “hideUnderElements” but that did not help. Is IE6 supported? Is there a workaround for this problem? It is a nice tool, but this problem is preventing me from using it.
Thanks,
Stefan
Beau,
first off, thanks heaps this tool is pretty nifty indeed. Love to see ppl developing stuff for the community, good work..
I don’t know if it’s just me but I don’t seem to be able to change the buttonX and buttonY position for some reason. Anyone else got that problem or is it really just me?
Cheers & keep up the good work! ~
[...] Help Balloon really cool Popup Baloon [...]
[...] Help Balloon 这个也很酷 [...]
Hi,
I try to use multiple events, like that:
useEvent: ['click','mouseover']
but this causes no reaction to any event. Any suggestions?
Thanks for the great component.
I think I have fixed the problem reported in the last post. Here it goes:
toggle: function(event)
{
if(!event) event = window.event || {type: (this.options.useEvent.length == 0 ? null : this.options.useEvent[0]), target: this.icon};
var icon = Event.element(event);
Event.stop(event);
var found;
for(var i = 0; i < this.options.useEvent.length; i )
if (this.options.useEvent[i] == event.type)
{
found = true;
break;
}
if(found && !this.visible && icon == this.icon)
{
this.show(event);
}
else
{
this.hide();
}
},
I too have tried to get the balloonDimensions element to work.
I resized the graphic and set balloonDimensions: [600,500], but the container doesn’t adjust.
Interestingly, 2.0 requires prototype and scriptaculous both if you want to display tables in the content.
Otherwise, this is an awesome tool. Hopefully, the Dimensions issue can be resolved, fixing the only serious flaw I’ve had with this tool.
HI Beau,
Great work …
Actually I need some larger ballons. So please provide me the code and images or link to them, if you have successfully implemented those. Its really a great help.
Great Work !!!
Thanks & Regards,
Sandeep Manocha
As people keep saying - great work (presumably so that you might be more inclined to answer their questions). My question is, can you trigger the balloons externally when using image maps?
Hi Beau
I found this recently and it rocks - looks awesome and is really space-efficient.
I have found one problem though - it doesn’t seem to work with older versions of Safari :-((
I have two old laptops with 1.3.2 and 2.0.4 and both show just the text without the background image. Worse still the text is transparent so you lose it against the background
Seems to work okay on my iphone Safari so may just be an “old” problem. I’m going to try and download latest Safari for PC and try that…
The good news is that it works fine with the latest Safari for PC (v.3.1.2). Haven’t upgraded either of the other two (both Macs) so maybe someone else could confirm it is fine on latest Safari for Mac.
Thanks!
i use Using other events to trigger the balloon and Using a different icon example #1.
How to make the icon sticky at bottom left of browser?
just like comodo autenthic site icon, they stick at botom left corner.
thanks in advance.
Fantastic widget Beau!
I was thinking of using a MySQL table to hold all the help text - would it be possible to read in a specific record for each balloon?
I guess I could add an option, but I am not all that au fait with javascript.
[...] HelpBalloon.js | DemoSimple help balloon tooltip with a close button. [...]
[...] BeauScott.com » HelpBalloon.js version 2.0 I’ve completed my updating of my aging AJAX help balloons / tool tips / dialog balloons / whatever you want to call them. [...]
HI!
Very nice library!
But incompatible with jquery.
I’ve got a collision: if put jquery inclusion before HelpBalloon.js inclusion doesn’t work jquery else viceversa if put jquery inclusion after HelpBalloon.js inclusion doesn’t work HelpBalloon.js.
Can you help me?
thx.
Here is the solution for the right dimensioning of the ballon: find in file helpBalloon.js the following lines:
————————————————-
this.balloonDimensions[0] = this._lastBalloon.width;
this.balloonDimensions[1] = this._lastBalloon.height;
————————————————-
Then substitute the code above with the following:
————————————————-
if (this.options.balloonDimensions != null) {
this.balloonDimensions[0] = this.options.balloonDimensions[0];
this.balloonDimensions[1] = this.options.balloonDimensions[1];
}
else {
this.balloonDimensions[0] = this._lastBalloon.width;
this.balloonDimensions[1] = this._lastBalloon.height;
}
————————————————-
Now it works!
But make attention to non restrict so much the balloon rispect to the content, otherwise there may be javascript errors.
Good luck! That’s all folks.
fedrok
HelpBalloon.js version 2.0…
I’ve completed my updating of my aging AJAX help balloons / tool tips / dialog balloons / whatever you want to call them….
If i put a link in the ‘content’ it works but the document can’t be validated as strict xhtml… any clue?
the validator says
document type does not allow element “a” here
Great tool! You’re an excellent coder. I see you’re working on the balloon dimensions. Is there a way to include a newline in the content? For my particular use on http://www.kurtscomics.com, I’d like the title of the comic book to stand out, and be separated from any other detail I might include about that comic book. It would be cool if I could include the “Add to Cart” button within the balloon too! I suppose if I used a dataURL — haven’t tried that yet.
Mainly I wanted to say thank you for the free use!!
oh yea? How to close on mouse out? Or how to close when using another image as the anchor? In IE6, when I click on one of my comic books, I get a lot of js errors as it seems the balloon stays ‘open’.
As some people asked about resizing the Balloons:
The dimensions are taken from balloon-3.png. So if you want to resize the tooltip, you only have to resize the pngs.
[...] HelpBalloon.js | Demo [...]
[...] HelpBalloon.js | Demo [...]
Hi
Wonderful work i love it so much but i have a big problem i can not see the balloon icon on ie7. With ff and opera it’s all perfect but on ie7 i have javascripts error and i can not see the “i” icon. The error is on line 1767 in prototype.js. Have somebody an idea? Thank you very much, sorry for my bad english
I found a “somewhat” hack to make it so the dimensions are configurable without requiring a custom image for each dimension:
=====================================================
1. Modify HelpButton.js to add “height” and “width” to the options
=====================================================
In the “prototype” method add the following (don’t forget to add a comma after the autoHideTimeout option):
width:null,
height:null
NOTE: I added the parameters into two area of the file (around line 218 after _lastBaloon:null, and around line 1152 after autoHideTimeout:0,)
=====================================================
2. Modify HelpButton.js to resize the imag
=====================================================
After:
var balloon = new Element(’img’, {
src: this.options.balloonPrefix i this.options.balloonSuffix
});
Add:
if (this.options.width != null) {
balloon.width = this.options.width;
}
if (this.options.height != null) {
balloon.height = this.options.height;
}
3. You may also need to modify/set the contentMargin parameter to get the margins to work (I haven’t had much time to play with this one, but hopefully this will help some of you)
Hi,
very nice script!
I’ve been playing around with it for a few days now, changing background, tweaking styles, using classes etc… to suit my needs
One thing I found interesting was to take into account page scrolling when choosing the 0, 1 2 or 3 position dynamically. Here’s what I changed:
Original code:
var pos = 1;
if(this.options.fixedPosition == HelpBalloon.POS_DYNAMIC)
{
var offsetHeight = this.balloonCoords.y - this.balloonDimensions[1];
if(offsetHeight < 0)
pos = 2;
Modified code:
var pos = 1;
if(this.options.fixedPosition == HelpBalloon.POS_DYNAMIC)
{
var cso = document.body.cumulativeScrollOffset();
var offsetHeight = this.balloonCoords.y - this.balloonDimensions[1] - cso[1];
if(offsetHeight < 0)
pos = 2;