Comments on: HelpBalloon.js version 2.0

By: Paul T.

Paul T. — Sat, 23 May 2009 23:34:58 +0000

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;

By: Anthony

Anthony — Thu, 21 May 2009 21:09:26 +0000

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)

By: Teo

Teo — Mon, 11 May 2009 18:36:08 +0000

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

By: Tooltips Scripts: Scripts With AJAX, Javascripts, CSS & Tutorials « Online Free Applications Software Tips Tools Wallpapers

Tue, 28 Apr 2009 18:07:57 +0000

[...] HelpBalloon.js | Demo [...]

By: Tooltips Scripts: 50+ Scripts With AJAX, Javascripts, CSS & Tutorials | BeckMint

Mon, 27 Apr 2009 01:33:32 +0000

[...] HelpBalloon.js | Demo [...]

By: Maarten

Maarten — Wed, 22 Apr 2009 12:02:03 +0000

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.

By: Kris

Kris — Fri, 10 Apr 2009 21:13:43 +0000

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’.

By: Kris

Kris — Fri, 10 Apr 2009 21:07:28 +0000

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!!

By: francesco

francesco — Tue, 07 Apr 2009 07:16:44 +0000

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

By: http://www.scriptremix.com/

http://www.scriptremix.com/ — Mon, 30 Mar 2009 11:04:15 +0000

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….