jquery - 如何使用 HTML 和 CSS 为输入字段的背景图像添加工具提示

Question

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

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 验证器进行验证，一切正常。唯一的小问题是，当我将鼠标悬停 输入字段时，会立即显示无效输入字段的工具提示，而不仅仅是在图标(显示在输入字段右侧)上。

Answer 1

我不这么认为。您可能只需要在该字段旁边添加一个新元素。并根据父 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>