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

Question

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

3

我需要在编写一个用于平板电脑的Web应用程序时寻求帮助。应用程序的一部分是提出一系列问题，并提供三个答案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>

- Barry McDaid1982

你对Jquery UI的感觉如何？使用可以在悬停或单击时触发的弹出窗口。 - Twisty

能否给一个例子，我对它们不熟悉。 - Barry McDaid1982

正在处理中。您能提供一些更具体的示例，说明提示中会包含哪些数据吗？ - Twisty

目前有一些文本文件，但问题涉及一个评分系统，每个答案都附带一个分数。因此，如果在问题一中选择了'C'，则会将3分传递给表格。希望这有所帮助。 - Barry McDaid1982

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Twisty · Accepted Answer

您可以使用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 }
        );
    });
});

由于平板电脑无法很好地模拟悬停效果，因此这将选择答案和一键显示说明结合在一起。