将指令显示为工具提示或弹出窗口

Question

I need help with some code. I am building a web app to work on a tablet. Part of the app asks a number of questions, and also provides 3 answers, A,B, or C. Each answer has a brief instruction which I need to display as tooltip, or popover. However when I test tooltip on my ipad it requires two clicks to select the answer, one for the tooltip and for for the answer.

If there any type of tool that can do this in one, display instruction and answer question by selecting A, B or C?

<tr>
       <td class="form-group col-md-6">Is there an indication for the drug?</td>

       <td id="Indication" class="form-group col-md-6">




           <p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Indicated"><input type="radio" name="indication" id="a1" value="0" <?php echo $a1; ?> required>A</input></p>
           <p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Marginally Indicated"><input type="radio" name="indication" id="a2" value="0" <?php echo $a2; ?> required>B</input></p>
           <p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Not Indicated"><input type="radio" name="indication" id="a3" value="5" <?php echo $a3; ?> required>C</input></p>

       </td>
       </tr>

Answer 1

You can do this with JQuery Mobile. Working Example: http://jsfiddle.net/Twisty/1hd0phbL/

Your HTML:

<table>
    <tr>
        <td class="form-group col-md-6">Is there an indication for the drug?</td>
        <td id="Indication" class="form-group col-md-6">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <input type="radio" name="indication" id="a1" value="0" />
                <label for="a1">A</label>
                <div data-role="popup" id="a1-popup">
                    <p>Instructions for A.</p>
                </div>
                <input type="radio" name="indication" id="a2" value="0" />
                <label for="a2">B</label>
                <div data-role="popup" id="a2-popup">
                    <p>Instructions for B.</p>
                </div>
                <input type="radio" name="indication" id="a3" value="5" />
                <label for="a3">C</label>
                <div data-role="popup" id="a3-popup">
                    <p>Instructions for C.</p>
                </div>
            </fieldset>
        </td>
    </tr>
</table>

Your JQuery Mobile:

$(function () {
    $("#Indication label").click(function () {
        //Get the ID that this label is for
        var ida = $(this).attr("for");
        // Get the Position for later
        var pos = $(this).offset();
        var ox = pos.left;
        var oy = pos.top;
        // Popup the correct tip
        $("#" + ida + "-popup").popup(
            "open",
            { x: ox+140, y: oy+50 }
        );
    });
});

Since Tablets can't mimic hovering very well, this combines the action of selecting the answer and bringing up the instructions in one click action.