Click here to Skip to main content
12,816,032 members (40,711 online)
Click here to Skip to main content
Add your own
alternative version


57 bookmarked
Posted 14 Jul 2005

JSBalloon: non modal feedback mechanism for DHTML applications

, 7 Sep 2005
Rate this:
Please Sign up or sign in to vote.
A flexible, encapsulated way to implement a passive feedback mechanism.

Sample Image - jsballoon.jpg


While working on a large intranet application I found that between validation errors, save confirmation messages, and other user feedback events, there were an awful lot of modal dialog boxes I had to pop and respond to. This DHTML object provides a balloon pop-up not unlike the Microsoft's tray balloon. While I agree that pop-ups are mostly a nuisance in the web environment, this form of rich tool tip may be very handy in streamlining user experience.

One of the features, in a form of an autoHide property, included in JSBalloon for example is the ability to hide the tool tip as soon as the user's mouse moves over it, thus swiftly allowing them to continue on with their work. Another advantage is the ability to place HTML code and form elements within a balloon, thus providing users with optional functionality that may either be easily dismissed or will hide on its own. The main purpose of this exercise, however, is to try and minimize the number of clicks and mouse moves the user needs to make.


JSBalloon is not meant as a replacement for some other excellent DHTML (JavaScript) pop-up libraries e.g. Jwin Popup Library or overLIB. Rather it is meant as a very simple enhancement of tool tip functionality within the DHTML environment. Note that the code was tested and will run in Microsoft Internet Explorer 6 only. Also, it was created for a fixed screen.

Using the code

The only thing you will need to do after copying the JSBalloon.js file to your web server is to update the JSBalloonPath variable with the full path where it is located. This is needed for locating the images and icons.

When instantiating new objects make sure that your JSBalloon variables are globally scoped and instantiated only once per object:

<script language="JavaScript">

var b4=new JSBalloon({ width:150, 

Once the object is created you may use the Show method to display a balloon and Hide method to hide it.

The following example demonstrates how to show a balloon. Note that B3 is the ID of a button on a page. The anchor is optional and you may use top and left named arguments to place the balloon anywhere on a page instead.

b4.Show({title:'JavaScript Balloon Example',
    message:'This is an example of a JSBalloon object. '+
        'It\'s primary application is to provide ' +
        'a modeless feedback to DHTML applications.',

You may also mix and match the arguments and properties:

var bl=new JSBalloon({ width:300});

function testBalloon()
    bl.Show({title:'JavaScript Balloon Example',
        message:'This is an example of a JSBalloon object. ' + 
                'It\'s primary application is to provide a '+
            'modeless feedback to DHTML applications.',
        anchor:B3, icon:'Info'});

and to hide:


Note that you don't have to call Hide if autoHide is true. Also, if autoAway is true the Hide method is called when a user moves the mouse over the balloon.

Please review the included source documentation for all the methods and properties.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Arkady Lesniara
Web Developer
Canada Canada
Arkady Lesniara is a Senior System Analyst/Developer based in Toronto, Canada, specializing in .Net solutions that focus on ASP .Net, VB .Net, T-SQL, AJAX, and all related technologies.

You may also be interested in...


Comments and Discussions

QuestionLicense to use the code Pin
neildux12-Oct-12 6:22
memberneildux12-Oct-12 6:22 
AnswerRe: License to use the code Pin
Arkady Lesniara12-Oct-12 6:31
memberArkady Lesniara12-Oct-12 6:31 
GeneralThanks for this post Pin
deepak_rai25-Jan-08 0:18
memberdeepak_rai25-Jan-08 0:18 
Questionhow I can show a balloon Pin
Tom_MJU11-Sep-07 23:20
memberTom_MJU11-Sep-07 23:20 
QuestionHow to pass .aspx page in this function Pin
er.miteshpatel11-Aug-07 17:48
memberer.miteshpatel11-Aug-07 17:48 
QuestionHow can i implement it in ASPX ? Pin
amitsm1432-Apr-07 22:14
memberamitsm1432-Apr-07 22:14 
AnswerRe: How can i implement it in ASPX ? Pin
Arkady Lesniara3-Apr-07 16:14
memberArkady Lesniara3-Apr-07 16:14 
GeneralPrinting page with balloons Pin
dlbjr17-Mar-07 10:26
memberdlbjr17-Mar-07 10:26 
GeneralUpdates to JSBalloon [modified] Pin
Niraj Sharma8-Dec-06 6:50
memberNiraj Sharma8-Dec-06 6:50 
QuestionUnable to Immplement the JsBallon in my aspx file VS 2005 Pin
sew new4-Aug-06 10:13
membersew new4-Aug-06 10:13 
QuestionDid anyone get it working in firefox? Pin
zquad15-May-06 18:09
memberzquad15-May-06 18:09 
AnswerRe: Did anyone get it working in firefox? Pin
SemXYZ19-May-06 12:42
memberSemXYZ19-May-06 12:42 
QuestionIs this JSBalloon licensed or Free for use? Pin
Wayne G. L12-May-06 9:16
memberWayne G. L12-May-06 9:16 
AnswerRe: Is this JSBalloon licensed or Free for use? Pin
Arkady Lesniara12-May-06 9:29
memberArkady Lesniara12-May-06 9:29 
GeneralFirefox Pin
poinciana20-Apr-06 5:25
memberpoinciana20-Apr-06 5:25 
GeneralYou are delayed 1 year Pin
Anonymous9-Sep-05 9:42
sussAnonymous9-Sep-05 9:42 
GeneralRe: You are delayed 1 year Pin
SORUOPNEHPETS21-Sep-05 10:20
memberSORUOPNEHPETS21-Sep-05 10:20 
GeneralFirefox version Pin
Andy Krafft8-Sep-05 8:31
memberAndy Krafft8-Sep-05 8:31 
GeneralObjectOverlap Pin
DeKale5-Sep-05 12:43
memberDeKale5-Sep-05 12:43 
GeneralRe: ObjectOverlap Pin
Arkady Lesniara6-Sep-05 6:02
memberArkady Lesniara6-Sep-05 6:02 
GeneralBalloon positioning upon scrolling Pin
Andy Krafft7-Aug-05 10:54
memberAndy Krafft7-Aug-05 10:54 
GeneralRe: Balloon positioning upon scrolling Pin
Arkady Lesniara8-Aug-05 4:52
memberArkady Lesniara8-Aug-05 4:52 
GeneralRe: Balloon positioning upon scrolling Pin
albans7-Apr-08 22:40
memberalbans7-Apr-08 22:40 
General.Show Delay Pin
Alex Haines28-Jul-05 15:26
sussAlex Haines28-Jul-05 15:26 
GeneralRe: .Show Delay Pin
Arkady Lesniara29-Jul-05 5:46
memberArkady Lesniara29-Jul-05 5:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170308.1 | Last Updated 7 Sep 2005
Article Copyright 2005 by Arkady Lesniara
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid