2

有没有办法只显示输入字段的背景图像的工具提示？

HTML

[...]
<tr>
    <td class="borderless right">
        <label class="label-required" for="Name">Name</label><span class="required">*</span>
    </td>
    <td class="borderless">
        <input 
    type="text" 
    name="myName" 
    id="myName" 
    class="text-box single-line" 
    data-val="true" 
    data-val-length="...at least n characters..." 
    data-val-length-max="50" 
    data-val-length-min="2" 
    data-val-regex="...only letters..." 
    data-val-regex-pattern="..." 
    data-val-required="...required..." />
</td>
</tr>

CSS

.errorImage
{
    background-image: url(...../someIcon.png);
    background-repeat: no-repeat;
    background-position: right 2px top 3px;
    border: 1px solid #cc8a8a;
    background-color: #fff5f5;
}

输入字段使用 jQuery 验证器进行验证，一切正常。唯一的小问题是，当我将鼠标悬停在输入字段上时，无效输入字段的工具提示就会显示出来，而不仅仅是在图标上（显示在输入字段的右侧）。

4

2 回答 2

0

嗨会说，如果是相同的元素，那将非常困难。可能最好的解决方案是更改生成的 html。但是，如果您显示一些 html 示例，可能会更容易。

于 2013-05-15T13:43:35.630 回答
0

我不相信。您可能只需要在该字段旁边添加一个新元素。并根据是否具有错误类的父 div 相应地定位/样式。

<div class="name error">
    <div for="first_name" title="First name must be at least 2 characters."></div>
    <input type="text" title="First Name" placeholder="First Name *" id="first_name">
</div>
于 2013-05-15T13:45:43.990 回答