Userscripts.org

See: http://www.knoppix.org/ (or http://www.knopper.net/knoppix/)

JavaScript code:

http://www.knopper.net/style/infobox.js
+++=========>click here to go down

//
// Bubblehelp infoboxes, (C) 2007 Klaus Knopper <infobox>
// You can copy/modify and distribute this code under the conditions
// of the GNU GENERAL PUBLIC LICENSE Version 2.
//
var IWIDTH=250  // Tip box width
var ns4         // Are we using Netscape4?
var ie4         // Are we using Internet Explorer Version 4?
var ie5         // Are we using Internet Explorer Version 5 and up?
var kon         // Are we using KDE Konqueror?
var x,y,winW,winH  // Current help position and main window size
var idiv=null   // Pointer to infodiv container
var px="px"     // position suffix with "px" in some cases

function nsfix(){setTimeout("window.onresize = rebrowse", 2000);}

function rebrowse(){window.location.reload();}

function hascss(){ return gettip('infodiv')?true:false }

function infoinit(){
 ns4=(document.layers)?true:false, ie4=(document.all)?true:false;
 ie5=((ie4)&&((navigator.userAgent.indexOf('MSIE 5')>0)||(navigator.userAgent.indexOf('MSIE 6')>0)))?true:false;
 kon=(navigator.userAgent.indexOf('konqueror')>0)?true:false;
 x=0;y=0;winW=800;winH=600;
 idiv=null;
 document.onmousemove = mousemove;
 if(ns4&&document.captureEvents) document.captureEvents(Event.MOUSEMOVE);
 // Workaround for just another netscape bug: Fix browser confusion on resize
 // obviously conqueror has a similar problem :-(
 if(ns4||kon){ nsfix() }
 if(ns4) { px=""; }
}

function untip(){
 if(idiv) idiv.visibility=ns4?"hide":"hidden";
 idiv=null;
}

function gettip(name){return (document.layers&&document.layers[name])?document.layers[name]:(document.all&&document.all[name]&&document.all[name].style)?document.all[name].style:document[name]?document[name]:(document.getElementById(name)?document.getElementById(name).style:0);}

// Prepare tip boxes, but don't show them yet
function maketip(name,title,text){
 if(hascss()) document.write('
<font>'+title+'</font>
<font>'+text+'</font>
'+"\n");
}

function tip(name){
 if(hascss()){
  if(idiv) untip();
  idiv=gettip(name);
  if(idiv){
   // winW=(window.innerWidth)? window.innerWidth+window.pageXOffset-16:document.body.offsetWidth-20;
   // winH=(window.innerHeight)?window.innerHeight+window.pageYOffset  :document.body.offsetHeight;
   // IE standards compliant mode compatibility partly contributed by Stefan Neufeind
   winW=(window.innerWidth)? window.innerWidth+window.pageXOffset-16:(document.documentElement&&document.documentElement.clientWidth)?document.documentElement.clientWidth-20:document.body.offsetWidth-20;
   winH=(window.innerHeight)?window.innerHeight+window.pageYOffset  :(document.documentElement&&document.documentElement.clientHeight)?document.documentElement.clientHeight:document.body.offsetHeight;
   if(x<=0||y<=0){ // konqueror can't get mouse position
    x=(winW-IWIDTH)/2+(window.pageXOffset?window.pageXOffset:0); y=(winH-50)/2+(window.pageYOffset?window.pageYOffset:0); // middle of window
   }
   showtip();
  }
 }
}

function showtip(){
  idiv.left=(((x+260)<winw><winh>

The CSS file (below) is not really needed, but when you block it, all the text in the tooltip is "text-align:center"

http://www.knopper.net/style/style.css

BODY          {font-family:Helvetica,Arial,sans-serif; background-color:white; color:black; text-align:justify}
TD            {font-family:Helvetica,Arial,sans-serif}
.clean        {font-family:Helvetica,Arial,sans-serif}
.tip          {font-family:Helvetica,Arial,sans-serif; position:absolute; left:0px; top:0px; visibility:hidden; z-index:20}
TD.tiptd      {border-bottom:1px solid #333366; border-top:1px solid #DDDDEE; border-left:1px solid #DDDDEE; border-right:1px solid #333366; padding:2px; font-family:Helvetica,Arial,sans-serif}
A:link        {font-family:Helvetica,Arial,sans-serif; color:#6060ff; text-decoration:none; font-weight:bold}
A:visited     {font-family:Helvetica,Arial,sans-serif; color:#6060a0; text-decoration:none; font-weight:bold}
A:active      {font-family:Helvetica,Arial,sans-serif; color:#6060f0; text-decoration:none; font-weight:bold}
A:hover       {font-family:Helvetica,Arial,sans-serif; background-color:#DDEEFF; color:#6060f0; text-decoration:none; font-weight:bold}
SPAN.nav      {font-family:Helvetica,Arial,sans-serif; color:#000000; text-decoration:none; font-size:small; font-weight:bold}
SPAN.subnav   {font-family:Helvetica,Arial,sans-serif; color:#000000; text-decoration:none; font-size:x-small; font-weight:bold}
A.nav:link    {font-family:Helvetica,Arial,sans-serif; color:#4040ff; text-decoration:none; font-size:small; font-weight:normal}
A.nav:visited {font-family:Helvetica,Arial,sans-serif; color:#4040a0; text-decoration:none; font-size:small; font-weight:normal}
A.nav:active  {font-family:Helvetica,Arial,sans-serif; color:#4040f0; text-decoration:none; font-size:small; font-weight:normal}
A.subnav:link    {font-family:Helvetica,Arial,sans-serif; color:#4040ff; text-decoration:none; font-size:x-small; font-weight:normal}
A.subnav:visited {font-family:Helvetica,Arial,sans-serif; color:#4040a0; text-decoration:none; font-size:x-small; font-weight:normal}
A.subnav:active  {font-family:Helvetica,Arial,sans-serif; color:#4040f0; text-decoration:none; font-size:x-small; font-weight:normal}
TABLE.nav     {padding:0px; font-family:Helvetica,Arial,sans-serif; text-decoration:none; font-weight:normal}
TABLE.subnav  {padding:0px; font-family:Helvetica,Arial,sans-serif; text-decoration:none; font-size:small; font-weight:normal}
TH.nav        {border-bottom:1px solid #333366; border-top:1px solid #DDDDEE; border-left:1px solid #DDDDEE; border-right:1px solid #333366; padding:0px; font-family:Helvetica,Arial,sans-serif; text-decoration:none; font-weight:normal}
TH.hnav       {border-bottom:1px solid #CCCCCC; border-top:1px solid #DDDDEE; border-left:1px solid #DDDDEE; border-right:1px solid #333366; padding:0px; font-family:Helvetica,Arial,sans-serif; text-decoration:none; font-weight:normal}
TH.subnav     {border-bottom:1px solid #333366; border-top:1px solid #DDDDDD; border-left:1px solid #DDDDEE; border-right:1px solid #333366; padding:0px; font-family:Helvetica,Arial,sans-serif; text-decoration:none; font-size:small; font-weight:normal}
TD.nav        {border-bottom:1px solid #333366; border-top:1px solid #DDDDEE; border-left:1px solid #DDDDEE; border-right:1px solid #333366; padding:0px; font-family:Helvetica,Arial,sans-serif; text-decoration:none; font-weight:normal}
TD.hnav       {border-bottom:1px solid #EEEEEE; border-top:1px solid #DDDDEE; border-left:1px solid #DDDDEE; border-right:1px solid #333366; padding:0px; font-family:Helvetica,Arial,sans-serif; text-decoration:none; font-weight:normal}
TD.subnav     {border-bottom:1px solid #333366; border-top:1px solid #EEEEEE; border-left:1px solid #DDDDEE; border-right:1px solid #333366; padding:0px; font-family:Helvetica,Arial,sans-serif; text-decoration:none; font-size:small; font-weight:normal}
SPAN.ptt      {font-family:Helvetica,Arial,sans-serif; font-size:small; font-weight:bold; color:white; text-align:center}
SPAN.pst      {font-family:Helvetica,Arial,sans-serif; font-size:small; font-weight:normal; color:black; text-align:left}
UL.pst        {font-family:Helvetica,Arial,sans-serif; font-size:small; font-weight:normal; color:black; text-align:left}

see more: http://www.knopper.net/style/

damn formatting...

so, about the Javascript code:

http://tinypaste.com/c9ca5af