tip help-js带箭头的提示框
日期：2014-05-16 浏览次数：20466 次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"???
??????? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">????
<html xmlns="http://www.w3.org/1999/xhtml">????
<head>????
?<title>Form field hints with CSS and JavaScript</title>????
<style type="text/css">
<!--?????
/* All form elements are within the definition list for this example */???
dl {????
?font:normal 12px/15px Arial;????
??? position: relative;????
??? width: 350px;????
}????
dt {????
??? clear: both;????
??? float:left;????
??? width: 130px;????
??? padding: 4px 0 2px 0;????
??? text-align: left;????
}????
dd {????
??? float: left;????
??? width: 200px;????
??? margin: 0 0 8px 0;????
??? padding-left: 6px;????
}????
/* The hint to Hide and Show */???
.hint {????
??? display: none;????
??? position: absolute;????
??? right: -250px;????
??? width: 200px;????
??? margin-top: -4px;????
??? border: 1px solid #c93;????
??? padding: 10px 12px;????
??? /* to fix IE6, I can't just declare a background-color,??
??? I must do a bg image, too!? So I'm duplicating the pointer.gif??
??? image, and positioning it so that it doesn't show up??
??? within the box */???
??? background: #ffc url("http://www.cssrain.cn/demo/formfieldhints/pointer.gif") no-repeat -10px 5px;????
}????
/* The pointer image is hadded by using another span */???
.hint .hint-pointer {????
??? position: absolute;????
??? left: -10px;????
??? top: 5px;????
??? width: 10px;????
??? height: 19px;????
??? background: url("http://www.cssrain.cn/demo/formfieldhints/pointer.gif") left top no-repeat;????
}????
-->
</style>
<style type="text/css" mce_bogus="1">????
/* All form elements are within the definition list for this example */???
dl {????
?font:normal 12px/15px Arial;????
??? position: relative;????
??? width: 350px;????
}????
dt {????
??? clear: both;????
??? float:left;????
??? width: 130px;????
??? padding: 4px 0 2px 0;????
??? text-align: left;????
}????
dd {????
??? float: left;????
??? width: 200px;????
??? margin: 0 0 8px 0;????
??? padding-left: 6px;????
}????
/* The hint to Hide and Show */???
.hint {????
??? display: none;????
??? position: absolute;????
??? right: -250px;????
??? width: 200px;????
??? margin-top: -4px;????
??? border: 1px solid #c93;????
??? padding: 10px 12px;????
??? /* to fix IE6, I can't just declare a background-color,??
??? I must do a bg image, too!? So I'm duplicating the pointer.gif??
??? image, and positioning it so that it doesn't show up??
??? within the box */???
??? background: #ffc url("http://www.cssrain.cn/demo/formfieldhints/pointer.gif") no-repeat -10px 5px;????
}????
/* The pointer image is hadded by using another span */???
.hint .hint-pointer {????
??? position: absolute;????
??? left: -10px;????
??? top: 5px;????
??? width: 10px;????
??? height: 19px;????
??? background: url("http://www.cssrain.cn/demo/formfieldhints/pointer.gif") left top no-repeat;????
}??
</style>????
<script type="text/javascript"><!--?
????
function addLoadEvent(func) {????
? var oldonload = window.onload;????
? if (typeof window.onload != 'function') {????
??? window.onload = func;????
? } else {????
??? window.onload = function() {????
????? oldonload();????
????? func();????
??? }????
? }????
}????
function prepareInputsForHints() {????
?var inputs = document.getElementsByTagName("input");????
?for (var i=0; i<in
