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
分享到：
相关推荐
"form-field-tooltip"是UI设计中的一个关键元素，主要功能是提供气泡提示，帮助用户理解并操作表单字段。在本文中，我们将深入探讨form-field-tooltip的原理、应用场景、实现方法以及相关的技术细节。 **一、气泡...
本项目的核心在于，通过JavaScript和CSS，我们可以实现对表单输入的即时验证，并以提示信息的形式展示给用户，这些提示通常以工具提示（tooltip）的形式呈现。 **jQuery基础知识** jQuery 是一个广泛使用的...
本话题聚焦于"表单验证Tooltip类型的友好提示方式"，这是一种优雅地向用户提供反馈的技术，旨在增强交互性和易用性。 Tooltip是一种常见的UI元素，它在鼠标悬停时显示额外的信息或提示，通常用于提供简短的解释或...
当用户尝试提交表单时，我们检查是否有未通过验证的字段，如果有，则阻止表单提交并给出提示。 这个简单的示例展示了如何使用`jQuery`结合CSS和HTML创建一个带有Tooltip效果的表单验证。你可以根据实际需求扩展此...
对于动态添加的表单元素，FormValidation提供了`addField`和`removeField`方法来动态管理验证： ```javascript // 添加字段 $('#myForm').formValidation('addField', 'newFieldName', { validators: { // 验证...
### Struts2 Form表单标签大全及应用解析 #### 表单标签概述 在Web开发中，表单是用户与服务器交互的重要手段之一。Struts2框架为了简化表单的操作和增强其功能，提供了一系列丰富的表单标签。本文将详细介绍...
我用过formValidation这个校验框架，虽然它跟bootstrap配合地很好，但是校验风格太死板，不太满足个性化的场景；后来我找到了jquery.validate，我发现这个框架还挺好的，因为它只提供校验机制，但是不提供特定校验的...
`<form>`标签用于创建表单，`<input>`、`<textarea>`等元素用于收集用户输入，而`<span>`或`<div>`常用来存放提示信息。CSS可以用来设置元素的定位、颜色、大小等，使提示信息与表单设计保持一致。 6. **响应式设计...
在HTML文件`form-field-tooltip.html`中，开发者首先需要在表单字段上添加特定的属性，如"data-tooltip"，来指定提示信息。然后，通过JavaScript引入`js`目录下的库文件，并调用初始化函数来应用Tooltip功能。例如...
3. 动态提示：利用ToolTip控件，可以实现鼠标悬停时显示提示信息，增强交互体验。 总结，C#中窗体Form的美化涉及多个方面，包括基本样式调整、自定义标题栏、GDI+绘图技术、窗体动画、拖动窗体以及高级特性。通过...
3. `Form1.frm`：这是主程序的表单文件，可能包含了使用自定义多行工具提示的界面元素。 4. `Group1.vbg`：这可能是一个包含其他控件或组件的资源文件，例如可能包含了用于测试多行工具提示的控件组。 5. `...
"基于jQuery的鼠标移到问号上出现提示框的demo"是一个常见的交互元素，常用于提供表单项的附加信息或帮助用户理解复杂的输入要求。这个功能利用了jQuery库的强大功能，使得在网页上实现这种交互效果变得简单高效。 ...
可以给表单元素添加自定义属性，如`data-error="请输入有效的邮箱地址"`，并在验证失败时通过jQuery选择器触发提示。 6. **阻止默认行为**：验证失败时，使用`.preventDefault()`阻止表单的默认提交行为，防止数据...
例如，`Modal`插件实现了弹出式窗口的动态显示和隐藏，`Popover`提供了浮动提示信息，而`Tooltip`则在鼠标悬停时显示元素的简短描述。 6. **自定义化**：Bootstrap 3.3.7的代码是模块化的，可以根据项目需求进行...
在这个例子中，`<el-tooltip>` 是组件的基本容器，`effect` 属性定义了提示框的背景颜色，`placement` 属性则定义了提示框相对于触发元素的位置。 为了实现文字超出框悬浮显示，我们可以创建一个新的 Vue 组件 `...
- **ToolTip**：为控件添加工具提示，当鼠标悬停在控件上时显示。 - **ErrorProvider**：为控件提供错误信息和视觉警告，通常用于表单验证。 #### 二、TextBox简介 `TextBox` 是一个基本的文本输入控件，它可以...
在"jQuery EasyUI 扩展(tip和form)"这个主题中，我们将深入探讨如何利用 EasyUI 的扩展功能来优化提示（tip）和表单（form）的交互体验。 首先，让我们谈谈“Tip”。在 Web 开发中，提示信息通常用于向用户提供即时...
提示功能（Tooltip）是提升用户体验的一种常见方法，它可以在鼠标悬停在某个元素上时显示额外的信息。jQuery提供了简单的API来创建自定义的提示效果。例如，我们可以使用`title`属性来设置默认的提示文本，然后使用`...
原版jQuery Validate通常将错误消息直接插入到表单元素下方，而修改版则采用了更现代的悬浮窗口（Tooltip）方式显示提示信息，具体特点如下： 1. **动态显示**：当用户输入不符合规则时，提示窗口会即时出现在相应...