html中加tooltip的方法
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
分享到：
相关推荐
基于JQuery的一款Form表单的消息提示。源码都在，可自己修改。
实现浮动在输入框周围的提示框，四个方向可以自己定义！
我用过formValidation这个校验框架，虽然它跟bootstrap配合地很好，但是校验风格太死板，不太满足个性化的场景；后来我找到了jquery.validate，我发现这个框架还挺好的，因为它只提供校验机制，但是不提供特定校验的...
文字提示 Tooltip 常用文字提示 通知提醒框 Notification 单行通知提示 多行通知提示 通知显示方式 气泡确认框 Popconfirm 常用气泡确认框 综合系列 More 顶部元素 Top Elements 图标工具栏 登录...
基于Bootstrap表单验证，供大家参考，具体内容如下 GitHub地址：https://github.com/chentangchun/FormValidate 使用方式： 1.CSS样式 .valierror { border-color: red !important; } .tooltip.right .tooltip-...
Ant design vue 的组件禁用属性 disabled
-MenuButton, LinkButton, Button, LinkButtonField增加ValidateTarget用来控制表单验证失败时提示对话框的显示位置。 +2010-01-06 v2.1.9 -集成Extjs最新版本v3.1.0。 -修正灰色皮肤的CSS问题。 -修正Grid...
-MenuButton, LinkButton, Button, LinkButtonField增加ValidateTarget用来控制表单验证失败时提示对话框的显示位置。 +2010-01-06 v2.1.9 -集成Extjs最新版本v3.1.0。 -修正灰色皮肤的CSS问题。 -修正Grid...
盖茨比GraphQL MongoDB架构图Form { name action method target containers : [ Container ]}Container { name title description groups : [ Group ]}Group { name header description tooltip fields :...
2-3写给ASP开发人员 2-3-1 ASP的物件 2-3-2了解NameSpace 2-3-3 Server的事件及执行位置 2-3-4数据定义的改变 2-4使用Visual Studio.NET 2-4-1集成的开发环境 2-4-2工程处理 检视各项...
mootools1.2 教学例子,本身就是用Mootools做的网页。 例子有如下： DOM选择器 Class（类） 特效之滑动登录框 性感的滑动Menu Extending Objects and Classes with mootools ...Form表单 Calendars_3（日历）
102 <br>0162 如何实现C#中用键完成TAB的功能 102 <br>0163 如何限制文本框密码输入长度 102 <br>0164 数据输入为空提示 103 <br>0165 如何设置文本框光标到末尾 103 <br>0166 输入法调整...
5、提供完整的界面解决方案：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；...
表单联合校验问题修复 PopOver 宽度计算问题修复 图片表单项 disabled 影响放大功能的问题修复 Transfer selectTitle resultTitle 不生效的问题修复 Tree 组件问题修复 Fiule 组件错误提示样式问题修复 Select 组件...
体验.net2.0的优雅（3） -- 为您的 SiteMap 添加 控制转发功能 GridView控件使用经验 ASP.NET 2.0：弃用 DataGrid 吧，有新的网格控件了！ ASP.NET2.0控件一览---标准控件(1) ASP.NET2.0控件一览---标准控件(2) ASP...