0

SO 入力要素の下にトグルする非表示の div であるツールチップがあります。フォーカス時にツールチップを表示し、ぼかしで非表示にします。

問題は、横向きまたはタブレット デバイスに表示されている場合に、ツールチップがラベル要素の下に残され、場違いに見えることです。

ただし、縦向きの場合、ラベルは入力要素の上にあり、ツールチップは下にあります。これは機能し、期待どおりに見えます（私が望むように）。

実際の例: http://jsfiddle.net/jtnmC/3/

質問：

では、横向きでツールチップを整列させて、ラベルではなく入力要素の下に並べて表示するにはどうすればよいですか? また、ポートレートの配置を台無しにしませんか？

<div>
    <label for="telephone">
        Phone Number*
    </label>
    <input type="text" name="telephone" id="telephone" required placeholder="Telephone#">
    <div name="telephone_tooltip" class="tooltip">
        Valid format
        <strong>
        <span>999-999-9999</span>
        </strong>. Please include the area code.
    </div>
</div>
4

1 に答える 1

1

マージンを追加してこれを修正しました。

実際の例: http://jsfiddle.net/jtnmC/12/

于 2011-04-28T12:50:10.890 に答える