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 に答える