JQuery工具提示,鼠标停留在表单中的图像上

JQuery tooltip on mouse over on images only in the form

本文关键字:图像 表单 停留在 工具提示 鼠标 JQuery      更新时间:2023-09-26

我有一个例子在这里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函数的第一个参数是一个选择器,所以你可以用它来查找任何你想要的元素。

此外,您必须删除
(以及相应的
)标记,因为您的html无效。不能在table元素中直接放置div