给form表单元素平添提示tooltip _Web前端

给form表单元素添加提示tooltip

html中加tooltip的方法

http://hi.baidu.com/huyangtree/blog/item/75d9c13687f322355ab5f509.html

1。如果是image,可以用alt和title属性

2。如果是其他元素，可以用title属性

http://www.javascriptkit.com/howto/toolmsg.shtml

3。如果是image，需要给image中的一个部分加tooltip，可以用usemap属性

http://www.frankmanno.com/ideas/css-imagemap/#

http://www.blogjava.net/auditionlsl/archive/2009/05/26/278012.html

http://www.jb51.net/web/18431.html

4。特殊形状的tooltip

http://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_use_for_polygonal_css

/*Tooltip and Pointer CSS*/
.fg-tooltip {
 padding: .8em;
 width: 12em;
 border-width: 2px !important;
 position: absolute;
}
.fg-tooltip .fg-tooltip-pointer-down, .fg-tooltip .fg-tooltip-pointer-down-inner {
 position: absolute; 
 width:0; 
 height:0; 
 border-bottom-width: 0;
 background: none;
}
.fg-tooltip .fg-tooltip-pointer-down { 
 border-left: 7px solid transparent; 
 border-right: 7px solid transparent;
 border-top-width: 14px;
 bottom: -14px;
 right: auto;
 left: 50%;
 margin-left: -7px;
}
.fg-tooltip .fg-tooltip-pointer-down-inner {
 border-left: 5px solid transparent; 
 border-right: 5px solid transparent;
 border-top: 10px solid #fff;
 bottom: auto;
 top: -14px;
 left: -5px;
}

jquery 方法：

表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的jQuery代码?

<input value="请输入用户名" type="text">
<input value="请输入密码" type="text">
<input value="提交" type="submit">
<script>
$(function(){
//输入框中文字颜色控制
$("input:not(:last)").css("color","#999");
});
//用户名框鼠标焦点移进，文字消失
$("input:first").click(function () {
var check1 = $(this).val();
if (check1 == this.defaultValue) {
$(this).val("");
}
});
//用户名框鼠标焦点移出，文字显示
$("input:first").blur(function () {
$(this).val(this.defaultValue);
});
//密码框鼠标焦点移进，文字消失
$("input:eq(1)").click(function () {
var check2 = $(this).val();
if (check2 == this.defaultValue) {
$(this).val("");
}
//密码框鼠标焦点移出，文字显示
$("input:eq(1)").blur(function () {
$(this).val(this.defaultValue);
});
})
</script>

---------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charsetGB2312" />
  <title>文本框点击时文字消失，失去焦点时文字出现 练习 by 阿会楠</title>
  
 </head>
 <body>
  <input type="text" value="请输入您的姓名" id="myinput" />
 </body>
</html>
<script language="JavaScript" type="text/javascript">
   function addListener(element,e,fn){    
        if(element.addEventListener){    
             element.addEventListener(e,fn,false);    
         } else {    
             element.attachEvent("on" + e,fn);    
          }    
   }
   var myinput = document.getElementById("myinput");
   addListener(myinput,"click",function(){
    myinput.value = "";
   })
   addListener(myinput,"blur",function(){
    myinput.value = "请输入您的姓名";
   })
</script></font>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

表单文本框提示样式，点击输入框时，灰色提示文字消失
<!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>?
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />?
<title>表单文本框提示样式</title>?
<style type="text/css">?
<!--?
.a1 {?
color: #CCCCCC;?
}?
.a2 {?
color: #000;?
}?
-->?
</style>?
</head>?

<body>?
<input name="n" type="text"/>?
<input name="n1" type="text"/>?
<script language="javascript">?

window.onload=function(){?
s('n','Your message1');s('n1','Your message2')?
}?
function g(a){return document.getElementById(a)}?
function s(n,v){?
with(g(n)){?
className='a1';value=v;?
onfocus=function(){if(value==v)value='';className='a2'}?
onblur=function(){if(value==''){value=v;className='a1'}}?
}?
}?
</script>?
</body>?
</html>

jquery tip插件：
http://xllily.iteye.com/blog/953557
http://yuanhsh.iteye.com/blog/985641