DHTML Balloon Hints

From TanisWiki

Image:Warning.jpgThis article is in the process of being written, so please excuse the missing sections, sources, factual errors, or any other problems.



Contents

[edit]

Introduction

Testing the balloon script
Testing the balloon script
While working on my favorite project: Momondo. I decided it would be nice to be able to add Balloon Hints (like cartoon talk bubbles) to some of the controls, to aid people in figuring out the user interface.

Looking around on the Internet I found the JSBalloon on The Code Project. While it was relatively advanced, it was Internet Explorer only, and I didn't really like the look of the balloons. So I decided to write my own script.

[edit]

How to use it

[edit]

Including the scripts

Add the following lines in the top of your script, in the head section: 

<script type="text/javascript" src="Fader.js">
</script>
<script type="text/javascript" src="BalloonHint.js">
</script>

If you have chosen to put the script in a subdirectory, just make sure to add the path to the beginning of the src attributes.

[edit]

Add onLoad function

Then add a function that will be called when the document is loaded: 

...
<script type="text/javascript">
function onLoad()
{
}
</head>
<body onload="onLoad()">
...
</script>
[edit]

Attach hints to your controls

In the onLoad function you call the helper function attachHint 

attachHint({elementId:'test1',eventType:"focus"}, {width:200}, {header:'Test', 
  message:'The balloon pops up over the control! <i>Note! This hint is shown 
  only once</i>', showClose:true, autoHide:true, autoHideInterval:10000, 
  verticalAlign:"top"});

The first argument is the settings for the attachHint function, the second argument is passed on in the creation of the BalloonHint class, and the third argument is passed on to the showBalloon() function of the BalloonHint class.

attachHint arguments
Argument Default value Description
element
elementId
eventType focus focus - mouseover
showOnce false true - false
Retrieved from "http://www.tanis.dk/wiki/index.php/DHTML_Balloon_Hints"