Блог

Итак, у меня есть всплывающая подсказка, представляющая собой скрытый div, который переключается под элементами ввода. При фокусировке я показываю всплывающую подсказку и скрываю при размытии.

Проблема заключается в том, что при альбомной ориентации или отображении на планшетном устройстве всплывающая подсказка остается под элементом label, который выглядит неуместно.

Но при портретном изображении надпись находится поверх элемента ввода, а всплывающая подсказка — ниже. Это функционирует и выглядит так, как ожидалось (как я хочу).

Живой пример: 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>
  

Исправлено путем добавления поля:

Живой пример: http://jsfiddle.net/jtnmC/12