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.
Plain | Fade | Delay | Custom CSS | Fixed position | Click to display

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!

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>

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.

Demo: http://boxover.swazz.org/example.html

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

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

Related Listings:

1. Boxover – Javascript/DHTML Tooltips BoxOver uses javascript / DHTML to show tooltips on a...
2. jQuery Plugin: betterTip BetterTip is a plugin for the JQuery library that allows...
3. HTML – CSS Multiline Tooltips This document explains how to make nice multiline tooltip for...
4. Mobile Tooltip Widget I am making an Ajax application using GWT and I...
5. ToolTip using MooTools Tooltip let’s you create mouse over tooltips to your content...

Do you like this post?

Email: