JQM（jQueryMobile）移动工具提示下的输入元素CSS定位 [英] JQM (jQueryMobile) Mobile Tooltip under input element CSS positioning

问题描述

我有一个工具提示，它是一个隐藏的div，切换输入元素下面。在焦点上我显示工具提示并隐藏模糊。

SO I have a tooltip which is a hidden div that toggles below the input elements. On focus I display the tooltip and hide on blur.

问题是当在横向或在平板电脑设备上显示工具提示在标签元素下面

The problem is when in landscape or displaying on a tablet device the tooltip is left under the label element which looks out of place.

但是，纵向标签位于输入元素的顶部，工具提示位于下方。

But is portrait the label is on top of the input element and the tooltip is below. This functions and looks as expected (like I want).

活动示例： http://jsfiddle.net/jtnmC/3/

问题：

所以在横向如何对齐工具提示，使其排列/显示在输入元素而不是其标签？还不乱乱的肖像定位？

So in landscape how do I align the tooltip so it lines up/displays under the input element and not its label? And also not mess up the portrait positioning?

<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>

推荐答案

通过添加边距来修复此问题：

Fixed this by adding a margin:

实例： http://jsfiddle.net/jtnmC/12/

这篇关于JQM（jQueryMobile）移动工具提示下的输入元素CSS定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！