All pastes #93518 Raw Edit

Someone

public text v1 · immutable
#93518 ·published 2006-07-20 15:08 UTC
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>&nbsp;</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>