javascript - 将说明显示为工具提示或弹出窗口

Question

我需要一些代码方面的帮助。 我正在构建一个可在平板电脑上运行的网络应用程序。该应用程序的一部分会提出一些问题，并提供 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 手机:

$(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 }
        );
    });
});

由于平板电脑无法很好地模拟悬停，因此这结合了选择答案和一次单击操作中的说明操作。