rendered paste body<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>helpPopups</title>
<style type="text/css">
body, p {
font-family: arial;
font-size: 9pt;
}
.helpPopup {
font-family: arial;
background-color: #fff;
filter: alpha(opacity=90);
display: none;
position: absolute;
z-index: 10000;
padding: 5px;
width: 300px;
height: 2em;
color: #000;
border: 2px #639 solid;
}
.helpTitle {
color: #444;
font-size: 10pt;
font-weight: bold;
}
.helpDesc {
color: #444;
font-size: 9pt;
}
.helpClose {
font-size: 9pt;
text-align: right;
vertical-align: bottom;
padding: 0px;
}
.helpClose a {
color: #fa7408;
}
img.help {
cursor: help;
border: 0;
}
#labels li {
display: block;
}
</style>
<script type="text/javascript">
/* showHelpTip */
function showHelpTip(div) {
if (document.getElementById){
id = document.getElementById(div);
id.style.display = "block";
id.style.left = event.clientX + document.body.scrollLeft + 2;
id.style.top = event.clientY + document.body.scrollTop + 2;
}
}
/* hideHelpTip */
function hideHelpTip(div) {
if (document.getElementById) {
id = document.getElementById(div);
id.style.display = "none";
}
}
</script>
</head>
<body>
<p> </p>
<a href="#" onclick="showHelpTip('label1');"><img src="help.gif" class="help" alt=""/></a> Label1<br/>
<a href="#" onclick="showHelpTip('label2');"><img src="help.gif" class="help" alt=""/></a> Label2<br/>
<a href="#" onclick="showHelpTip('label3');"><img src="help.gif" class="help" alt=""/></a> Label3<br/>
<div id="helpTips">
<div id="label1" class="helpPopup">
<div class="helpTitle">Help title1</div>
<div class="helpDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
<div class="helpClose"><a href="javascript:hideHelpTip('label1');">close</a></div>
</div>
<div id="label2" class="helpPopup">
<div class="helpTitle">Help title2</div>
<div class="helpDesc"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div class="helpClose"><a href="javascript:hideHelpTip('label2');">close</a></div>
</div>
<div id="label3" class="helpPopup">
<div class="helpTitle">Help title3</div>
<div class="helpDesc"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div class="helpClose"><a href="javascript:hideHelpTip('label3');">close</a></div>
</div>
</div>
</body>
</html>