JQM (jQueryMobile) Mobile Tooltip under input element CSS positioning

问题

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

Live Example: http://jsfiddle.net/jtnmC/3/

Question:

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>

回答1:

Fixed this by adding a margin:

Live Example: http://jsfiddle.net/jtnmC/12/

来源：https://stackoverflow.com/questions/5755952/jqm-jquerymobile-mobile-tooltip-under-input-element-css-positioning