Tooltips, Floating captions - DHTML, javascript - BoxOver

   Home   
   Projects   
   Support   
 

What is BoxOver?

Download

Installation

Settings

Demo

Features

Example

Changes / Bugfixes

Uses

Compatability

Some Background

Why sms.ac sucks | Forum

  What is BoxOver?

BoxOver uses javascript to show tooltips on a website. 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!


  Download

Some of BoxOver's benefits

low CPU consumption, i.e. flicker-free

works in all major browsers

lightweight, less than 10kb in size

lots of functionality

Good looking default styles, though easily customisable

Latest version: 1.9 (12th December 2005) Click here to download the latest version of BoxOver.

Added fade and delay options! Move over this to see a fading tooltip




  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 caption 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 caption 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 caption.
</DIV>


This "div" now looks like this:
My div with some text inside. Move over me to see my caption.



  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]......"


The following table lists settings for BoxOver.
Parameter Possible values Default Description
header Any character blank Specifies the header text of the caption
body Any character blank Specifies the body text of the caption
fixedrelx Any integer N/A Forces the X-coordinate of the caption to stay fixed (offset is relative to the annotated HTML element)
fixedrely Any integer N/A Forces the Y-coordinate of the caption to stay fixed (offset is relative to the annotated HTML element)
fixedabsx Any integer N/A Forces the X-coordinate of the caption to stay fixed (X is an offset relative to the body of the HTML document)
fixedabsy Any integer N/A Forces the Y-coordinate of the caption to stay fixed (Y is an offset relative to the body of the HTML document)
windowlock On / Off On Make caption stick to side of the window if user moves close to the side of the screen.
cssbody Any defined style class Built in styles Specifies CSS class for styles to be used on caption body.
cssheader Any defined style class Built in styles Specifies CSS class for styles to be used on caption header.
offsetx Any integer 10 Horizontal offset, in pixels, of the caption relative to the mouse cursor.
offsety Any integer 10 Vertical offset, in pixels, of the caption relative to the mouse cursor.
doubleclickstop On / Off On Specifies whether to halt the caption when the user double clicks on the HTML element with the caption.
singleclickstop On / Off Off Specifies whether to halt the caption when the user single clicks on the HTML element with the caption. - if both singleclickstop and doubleclickstop are set to "on", singleslclickstop takes preference.
requireclick On / Off Off Specifies whether the user must first click the element before a tooltip appears. Intended for use on links so that information appears while the link is followed.
hideselects On / Off Off Specifies whether to hide all SELECT boxes on page when popup is activated.
fade On / Off Off Specifies whether to fade tooltip into visibility.
fadespeed Number between 0 and 1 0.04 Specifies how fast to fade in tooltip.
delay Any integer 0 Specifies delay in milliseconds before tooltip displays.



  Demo

Move your mouse over the block below or the highlighted words to to see BoxOver in action.
Move your mouse over the highlighted words in this sentence to see different uses for BoxOver.


  Features

  • Optimised for lowest CPU usage with lightning response times
  • Tested in all major browsers
  • Easy to set up with only a basic knowledge of HTML
  • Open source



  •   Example

    You can see a working example page with BoxOver here.


      Changes / Bugfixes

    19 Jan 2005Fixed bug of caption not appearing when hovering over the caption's HTML element before the page is fully loaded.
    27 Jan 2005Created the example page you see below.  Also changed script so that normal title attributes on a page still work.
    05 Feb 2005Sorted out opacity in default styles for FireFox. Also altered event binding slightly.
    11 Feb 2005Revamped the example page.
    20 Apr 2005Added "singleclickstop" attribute allowing user to specify whether window should halt element is singleclicked.
    15 Jun 2005Made change to fix bug with intermittent problems regarding boxover not appearing/initialising.
    This last change is a lie. My change didn't actually do anything, oops. But the problem is fixed by placing the <SCRIPT> tags at the bottom of the page
    12 Jul 2005Fixed DOCTYPE error where boxover was not working with certain DOCTYPE declarations. Thanks to Relien from France for sending me the update!
    24 Jul 2005Fixed scrolling bug in IE6 when standards mode invoked with DOCTYPE, see forum for details.
    31 Aug 2005Included option to hide select boxes to workaround IE6 bug with select boxes.
    25 Sep 2005Fixed DOCTYPE and CSS problems. Detail on problem here
    16 Nov 2005Added new requireclick attribute for use on links as requested in the forum here
    12 Dec 2005Added delay and fade options



      Uses

  • Tooltips
  • Data grids with BoxOver showing extra details for each row
  • TITLE attribute replacement
  • Neatening presentation



  •   Compatability

  • Works in all latest browsers incl. IE 6, IE 5, Mozilla 1.4+, FireFox 0.9.3 Opera 7



  •   Some Background

    Well BoxOver went through many changes over the time I developed it (ey stop yawning). It started uot as a behaviour - which was a problem because you limited to IE, though there was a component out that some sharp bugger developed which allowed using behaviours in mozilla. There was some problem I couldn't resolve going this route though - also it required that the user be familiar with XML, too complicated for all you dummies out there. So then I came up with the idea of configuration through the title tag. At first I wanted to see if browsers would recognise custom tags (e.g. <img boxover="">) which I could manipulate javascript side. Problem was that some browsers didn't pull the value through from the HTML into javascript. So Then I decided on the TITLE tag. It's for tooltips afterall and it made sense that they one should be able to stylise them. The initial spark which made me decide to do it was using overlib. Probably the best known tooltip out there. I didn't like it though, it was 30kb big first off - thats quite a chunk to download just for tooltips. Also it used up a lot of CPU and tended to flicker. It is also harder to set up, you need a basic knowledge of javascript - well not really though you do have to call a javascript function which might frighten some people away. So I designed this component with all this in mind, and after many many hours of trying different methods I got it working just as I envisioned it. In the process I learnt one hell of a lot of javascript. It also feels good to know that a couple of people out there might use something I wrote. Well if you finished reading this, nice one. Over and out.


    Custom CSS popup
    This is a popup which gets it styles from the stylesheet on this page