BoxOver uses javascript / DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or javascript. Move your mouse over the items below to see examples.

You can use combinations of the above as well.
- BoxOver is free and distributed under the GNU license – If you wish to use it in a commercial product please link back to http://boxover.swazz.org and acknowledge it’s use somewhere – If you would like to contribute please link back to this page so that I can make BoxOver the most popular tooltip available Enjoy!

If you like BoxOver be sure to check out the new javascript calendar by the same author!

Installation

Step 1
Include the folllowing somewhere in the HTML of your page

<script SRC="BoxOver.js"></script>

NB: Make sure “src” points to the correct location of the boxOver.js file

Step 2
Next, go to the code for the HTML element you would like the tooltip to appear over.
For instance, imagine we had the following “div” in our HTML document.

<div style="BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 75px">
My div with some text inside
</div>

This “div” looks as follows:
My div with some text inside

BoxOver is configured through the “title” attribute of HTML elements.
To make a tooltip appear over the “div” above we alter the code as follows:

<div TITLE="header=[header text] body=[body text]" STYLE="BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 75px">
My div with some text inside.  Move over me to see my tooltip.
</div>

This “div” now looks like this:
My div with some text inside. Move over me to see my tooltip.

Settings
The “installation” section details the most simple way to initialise BoxOver.
There are many tweaks which can be set to customise it to your needs.
As shown above BoxOver is set through a tag’s “title” attribute.

The general format is given by

title="parameter1=[value1] parameter2=[value2] parameter3=[value3]......" 

Demo: http://boxover.swazz.org/#section14

Download: http://boxover.swazz.org/download/boxover2.1.zip

Source: http://boxover.swazz.org/#section14

Related Listings:

1. Bubble Tooltips : Javascript Bubble Tooltips are an easy way to add (via a...
2. Style Your Websites Tooltips With Prototip Now it’s very easy to creat complex tooltips. Here is...

Do you like this post?

Email: