New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

Rich HTML Balloon Tooltip

Author: Dynamic Drive

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
Original, practical CSS codes and examples such as CSS menus to give your site a visual boast!
Award winning JavaScript tutorials and over 400+ free scripts.


Directions: Developer's View

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

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

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!