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

Question

我需要一些代码的帮助。 我正在构建一个在平板电脑上工作的Web应用程序。 应用程序的一部分会询问一些问题，并提供3个答案，A，B或C.每个答案都有一个简短的说明，我需要将其显示为工具提示或弹出窗口。 但是，当我在ipad上测试工具提示时，需要两次单击才能选择答案，一个用于工具提示和答案。

如果有任何类型的工具可以在一个工具中执行此操作，通过选择A，B或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

你可以用JQuery Mobile做到这一点。 工作示例： http ： //jsfiddle.net/Twisty/1hd0phbL/

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

你的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 }
        );
    });
});

由于平板电脑无法很好地模仿悬停，因此它结合了选择答案和在一次点击操作中显示指令的操作。