JQuery工具提示,鼠标停留在表单中的图像上
JQuery tooltip on mouse over on images only in the form
我有一个例子在这里http://www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery/comment-page-2#comment-2746
它在样式表中创建一个效果,并屏蔽通过该函数传递的任何标记的默认工具提示
$(document).ready(function() {
simple_tooltip("img","tooltip");
});
function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' type='img' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);
$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
my_tooltip.fadeOut(400);
});
});
}
,但问题是它显示的工具提示在每一个图像标签的页面,因为我只想显示它在表单验证帮助图标。这是我的表单
<form id="form1">
<table id="tblSignUp" border="0" cellpadding="2" cellspacing="5"
style="border: 0px solid black; color: #FFFFFF;">
<div id="inputs">
<tr>
<td>First Name<font class="AsterikLabel">*</font> :</td>
<td><input id="firstname" size="35" maxlength="50" type="text"
style="width: 175px;"
onblur="checkError(this);" name="fname" />
<img title="Alphabets, numbers and space(' ') , no special characters min 3 and max 20 characters."
src="PsychOImages/20.png" align="bottom" /></td>
<td id="firstName1"></td>
</tr>
<tr>
<td>Last Name<font class="AsterikLabel">*</font> :</td>
<td><input type="text" id="lastname" style="width: 175px;"
name="lastname"
onblur="checkError(this);" />
<img title="Alphabets, numbers and space(' ') , no special characters min 3 and max 20 characters."
src="PsychOImages/20.png" align="bottom" />
</td>
<td id="lastname1"></td>
</tr>
<tr>
<td>Email<font class="AsterikLabel">*</font> :</td>
<td><input id="email" type="text" style="width: 175px;"
name="email"
onblur="checkError(this);" />
<img title=" The Email address format is yourname@example.com." src="PsychOImages/20.png" align="bottom" /></td>
<td id="email1"></td>
</tr>
<tr>
<td>Telephone<font class="AsterikLabel">*</font> :</td>
<td><input id="phone" type="text" style="width: 175px;"
name="phone"
onblur="checkError(this);" maxlength="16"/>
<img title="Format : 339-4248 or (095) 2569835 or +7 (095)1452389"
src="PsychOImages/20.png" align="bottom" /></td>
<td id="phone1"></td>
</tr>
<tr>
<td>Choose a Password<font class="AsterikLabel">*</font> :</td>
<td><input id="password" type="password" style="width: 175px;"
name="password" onblur="checkError(this);" />
<img title="Password feild can only contains 7 to 15 characters" src="PsychOImages/20.png" align="bottom" /></td>
<td id="password1"></td>
</tr>
<tr>
<td>Re-Type Password<font class="AsterikLabel">*</font> :</td>
<td><input id="repassword" type="password"
style="width: 175px;"
name="retype" onblur="checkError(this);" />
<img title="Retype teh password same as above for confirmation" src="PsychOImages/20.png" align="bottom" /></td>
<td id="repassword1"></td>
</tr>
</div>
</table>
</form>
i have tried putting my form into a div and then giving that Div id to the function
`simple_tooltip("","")` but it stops working then.... please help!
$(function() {
simple_tooltip("#form1 img", "tooltip");
});
simple_tooltip函数的第一个参数是一个选择器,所以你可以用它来查找任何你想要的元素。
此外,您必须删除(以及相应的相关文章:
- 将图像上传ajax与表单提交ajax相结合
- 语义ui表单验证:图像url
- 一个具有两个图像按钮的表单在只能按下一个按钮的情况下发送两个按钮值
- 如何通过ajax php将图像上传到服务器本地目录,其中html表单haven't任何传统的提交按钮
- 使用HTML/Javascript表单使用ActiveXObject创建带有嵌入图像的outlook电子邮件
- 不显示为表单元素的图像输入按钮的动态创建和appendChild
- 纯javascript的进度图像加载程序仅当用户单击提交html表单时
- jquery表单和图像提交
- 在图像像素加载时提交表单
- HTML图像映射为表单提交
- 表单验证和提交时提交文本&输入按钮上带有验证的图像
- 在没有表单的情况下通过AJAX上传图像
- 当互联网可用时,自动提交图像表单
- 如何在刷新时显示PHP表单中的随机文本和图像
- 如何在模式窗口中从html表单文件类型打开图像
- 如何在提交空白表单时隐藏图像
- 从表单中派生要使用javascript对象加载的图像路径
- 使用javascript上传不带表单的图像
- Javascript创建一个新的上传图像表单
- 提交图像表单验证