当前位置：编程学习 > JS >>
答案：HTML复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css"
href=><style>
#myform {
border:1px outset #ccc;
background:#fff repeat-x;
padding:20px;
margin:20px auto;
width:350px;
font-size:12px;
-moz-border-radius:4px;
}
#myform h3 {
text-align:center;
margin:0 0 10px 0;
}
/* http://www.quirksmode.org/css/forms.html */
#inputs label, #inputs input, #inputs textarea, #inputs select {
display: block;
width: 150px;
float: left;
margin-bottom: 20px;
}
#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}
#inputs br {
clear: left;
}
</style>
</head>
<body><form id="myform" action="#">
<h3>Registration Form</h3>
<div id="inputs">
<!-- username -->
<label for="username">Username</label>
<input id="username" title="Must be at least 8 characters."/>
<br />
<!-- password -->
<label for="password">Password</label>
<input id="password" type="password" title="Make it hard to guess." />
<br />
<!-- email -->
<label for="email">Email</label>
<input id="email" title="We won't send you any marketing material." />
<br />
<!-- message -->
<label for="body">Message</label>
<textarea id="body" title="What's on your mind?"></textarea>
<br />
<!-- message -->
<label for="where">Select one</label>
<select id="where" title="Select one of these options">
<option>-- first option --</option>
<option>-- second option --</option>
<option>-- third option --</option>
</select>
<br />
</div>
<!-- email -->
<label>
I accept the terms and conditions
<input type="checkbox" id="check" title="Required to proceed" />
</label>
<p>
<button type="button" title="This button won't do anything">
Proceed
</button>
</p>
</form>
<!-- javascript coding -->
<script>
// execute your scripts when the DOM is ready. this is a good habit
$(function() {
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
});
</script>
</body>
</html>
CSS复制代码 代码如下:
/* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
CSS可以不需要，这样显示的样子恶心了点。
关键代码：复制代码 代码如下:
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
tipClass:'tooltip', // 省却值：tooltip，少了这一行效果也是一样
// custom opacity setting
opacity: 0.7
});
使用
这里是可能存在的最简单的工具提示的初始化:
$("#myform :input").tooltip();配置
| 属性 | 默认值 | 描述 |
|---|---|---|
| cancelDefault | true |
自从1.1.0版。 当工具提示内容抓取 从 标题 触发器元素的属性 这个属性取消默认工具提示执行的行为 浏览器。 这是通过简单的移除 这个 标题 属性从触发器。
你仍然可以检索/修改标题值通过调用 jQuery的 数据('title') 方法为触发。 |
| effect | 'toggle' |
指定了如何显示和隐藏的提示。 有两个 内置的效果,可以用作值:
toggle 。 一个简单的显示/隐藏效果。 这是 默认 fade 。 一个简单的淡入/淡出效果 还有一个 幻灯片效果 不 包括在该工具本身。 你可以 构建 你自己的。 |
| delay | 30 |
指定工具提示依然可见多久后鼠标 叶子触发器。 这是必需的,如果tootip已 互动的内容和用户将需要时间去 tootip区域。 通过设置0工具提示也会消失 鼠标离开就从触发器元素。 |
| events | Object |
一个配置对象,它指定当工具提示会 显示和隐藏。 您可以指定不同的事件不同 类型的元素。 这里有默认值为这个 属性:
events: {
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络， |
