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验证器验证输入字段，一切正常。唯一的小问题是，只要我鼠标悬停输入字段，就会显示无效输入字段的工具提示，而不仅仅是图标（显示在输入字段右侧）。< / p>

Answer 1

你会说，如果是同一个元素，那将是非常困难的。可能最好的解决方案是更改生成的html。但是如果你展示一些html样本可能会更容易。

Answer 2

我不相信。您可能只需在字段旁边添加一个新元素。和位置/样式相应地基于具有错误类的父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>

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

2 个答案: