Description: This is a balloon style tooltip that can be applied to any link(s) on the page. What sets it apart is where it gets the tooltip messages- from ordinary DIV elements on the page containing the desired tooltip content. This fact means you can easily define tooltips with rich HTML and images inside them. In other words, any content can now easily become a tooltip message, whether you're manually defining the tooltips, or dynamically generating them using server side languages.

The tooltip supports an optional arrow image that like the tooltip itself, dynamically adjusts itself if it's too close to any four corners of the browser window.

Demos:

Welcome to Dynamic Drive CSS Library! Here you'll find original, practical CSS codes and examples such as CSS menus to give your site a visual boast.

Comprehensive JavaScript tutorials and over 400+ free scripts: JavaScript Kit

---

Directions:

Step 1: This script uses two external files, plus two images for the optional arrow interface. Download:

"balloontip.js" and "balloontip.css" (by right clicking each file, and selecting "Save As"), and also, the below two images:

Be sure to upload them to your webpage directory.

Then, add the below code to the HEAD section of your page:

Select All
<link rel="stylesheet" type="text/css" href="balloontip.css" /> <script type="text/javascript" src="balloontip.js"> /*********************************************** * Rich HTML Balloon Tooltip- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Please keep this notice intact * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ </script>

Step 2: Having done the above, all that's left is to define your tooltips using plain HTML, then assigning them to particular links on the page. Insert the below sample HTML to the BODY section of your page:

Select All
<!--Sample links--> <a href="http://www.dynamicdrive.com/style/" rel="balloon1">Dynamic Drive CSS Library</a><br /><br /> <a href="http://www.javascriptkit.com" rel="balloon2">JavaScript Kit</a> <!--Sample corresponding tooltips--> <div id="balloon1" class="balloonstyle"> <img src="shadetabs.gif" style="float: right; margin-left: 5px; border:1px solid black" />Original, practical CSS codes and examples such as CSS menus to give your site a visual boast! </div> <div id="balloon2" class="balloonstyle" style="width: 350px; background-color: lightyellow"> Award winning JavaScript tutorials and over 400+ free scripts. </div>

That's a wrap.

Customizing the script

As demonstrated in the code of Step 2, to define a tooltip and assign it to a particular link, the entire code looks like this:

<!--Sample link-->
<a href="http://www.javascriptkit.com" rel="balloon1">JavaScript Kit</a> 

<!--Sample balloon tooltip-->
<div id="balloon1" class="balloonstyle" style="width: 350px; background-color: lightyellow">
Award winning JavaScript tutorials and over 400+ free scripts.
</div>

To define a tooltip, simply create a DIV element, plus give it an arbitrary but unique ID (ie: "balloon1") and class name called "balloonstyle". Then input any HTML you wish to be shown inside the element. Then, to associate this tooltip with a particular link, insert a "rel" attribute inside the link's tag with the ID of the tooltip as the value. That's it!

Note that inside "balloontip.js", there are a few variables at the top you can customize to your liking:

var disappeardelay=250 //tooltip disappear delay (in milliseconds)
var verticaloffset=0 //vertical offset of tooltip from anchor link, if any
var enablearrowhead=1 //0 or 1, to disable or enable the arrow image
var arrowheadimg=["arrow2.gif", "arrow.gif"] //path to up and down arrow images
var arrowheadheight=11 //height of arrow image (amount to reveal)

Enjoy!