Simple Tooltip Implementation using CBE

Mouse over the links to see the tooltips. Of course, the more standard way of doing this is simply to use the TITLE attribute of an element.

Cross-Browser.com offers two cross-browser DHTML APIs. They support IE, Gecko, Opera, AOL, NN4, Konqueror, and browsers with similar object models. CBE implements the DOM object tree, the DOM2 event model, and other DOM2 interfaces. X is a small library using only object detection. Extensive documentation and examples are included.

The css...

.clsCBE {
  position:absolute; visibility:hidden;
  color:#000000; background:#ffffff; margin:0px; padding:2px;
  font-family:verdana,arial,sans-serif,helvetica; font-size:10px;
  border:1px solid #000000;
}
.nnTooltip {
  color:#000000; background:#ffffff;
  font-family:verdana,arial,sans-serif,helvetica; font-size:10px;
  border:1px solid #000000;
}

The javascript...

var tooltip;
function windowOnload() {
  with (tooltip = cbeGetElementById('idTooltip').cbe) {
    hide();
    moveTo('w',0,true);
  }
}
function showTip(evt, tip) {
  var tt=tip, e = new CrossBrowserEvent(evt);
  tooltip.moveTo(e.pageX+10, e.pageY+10);
  if (is.nav4) tt = "<span class='nnTooltip'>" + tt + "</span>";
  tooltip.innerHtml(tt);
  tooltip.show();
}
function hideTip() {
  tooltip.hide();
  tooltip.moveTo('w',0,true);
}

The html...

<div id='idTooltip' class='clsCBE'>tool tip</div>

An example of usage...

<a href="http://cross-browser.com/" onmouseover="showTip(event,'Home of CBE')" onmouseout="hideTip()">Cross-Browser.com</a>
tool tip