«

I have been using the following code for a while to create popups on my
web application. Recently I noticed it started throwing an "invalid
pointer" error every time I mouse over the triggering text. I have no
idea why, but it is driving me, and my users crazy. Strange
thing....popups still work fine!! Just want to get rid of the error
incase it gets worse, and so my users no longer have to contstantly
close the error box if they don't know how to turn it off.

here is the code:

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="ShowHelp()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="HideHelp()" />
<SCRIPT LANGUAGE="JScript">

var oPopup = null;

function ShowHelp()
{
if ( oPopup == null )
{
oPopup = window.createPopup();
var mySheet = oPopup.document.createStyleSheet();
var nSheets = element.ownerDocument.styleSheets.length;
for ( var i = 0; i < nSheets ; i++)
{
var sheet = element.ownerDocument.styleSheets(i);
if ( sheet != null )
{
var nRules = sheet.rules.length;
for ( var j = 0; j < nRules; j++)
{
var rule = sheet.rules(j);
mySheet.addRule(rule.selectorText,
rule.style.cssText);
}
}
}
}

var theId = event.srcElement.helpTextId;
if ( theId == null )
return;

var document = element.ownerDocument;
if ( document == null )
return;

var theDiv = document.all[theId];
if ( theDiv == null )
return;

oPopup.document.body.innerHTML = theDiv.outerHTML;

var popupBody = oPopup.document.body;

oPopup.show(0,0,300,0);
var height = popupBody.scrollHeight;
oPopup.hide();

var width = 300;

var ix = event.srcElement.scrollWidth + 1;
var iy = -height - 5;


// relative to elem when passed not null
oPopup.show(ix, iy, width, height, event.srcElement);

}

function HideHelp()
{
if ( oPopup != null )
oPopup.hide();
}

</SCRIPT>
</PUBLIC:COMPONENT>



Here is an example of the div and span that calls the popup:

<div style="display: none">
<div id='DIVIDHERE' class=helpbox>
<p>POPUP TEXT TO BE SHOWN HERE</p>
</div>
</div>

<b><span helpTextId='DIVIDHERE' class="helpPopupButton">
TRIGGERING TEXT HERE
</span></b>


here are the CSS styles it uses:

span.helpPopupButton
{
behavior:url('../includes/helppopup.htc');
color: #336699
}


/**
* Used for "tooltip" pop-ups using "onmouseover" and "onmouseout"
element
* events. Use the accompanying javascript routines to position and
render
* the help boxes.
*/
div.helpbox
{
BACKGROUND-COLOR: #ffff99;
COLOR: black;
BORDER-LEFT: 1px solid;
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
BORDER-BOTTOM: 1px solid;
PADDING-LEFT: 5px;
PADDING-RIGHT: 5px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
MARGIN-RIGHT: 0px;
MARGIN-LEFT: 0px;
MARGIN-TOP: 0px;
MARGIN-BOTTOM: 0px;
}


and if you fix it feel free to re-use the code. Pretty sure it's not
copyrighted.