在平板电脑上使用弹出框

Question

我正在设计一个用于平板电脑的页面，它是一个网络应用程序。我在应用程序中有几个问题，每个问题有 3 个答案 A、B 或 C。如果 selected，我想在每个答案上方显示说明。到目前为止，我已经使用了工具提示，但是当我在平板电脑上测试它时，需要点击两次，点击一次以显示说明，点击一次实际 select 答案。我可以一键完成吗？弹出框可以吗？

这里有两个问题

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

       <tr>
       <td class="form-group col-md-6">Is the medication effective for the condition?</td>
       <td  id="Effectiveness" class="form-group col-md-6">
            <p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Effective"><input type="radio" name="effective" id="b1" value="0" <?php echo $b1; ?> required>A</input></p>
            <p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Marginally Effective"><input type="radio" name="effective" id="b2" value="0" <?php echo $b2; ?> required>B</input></p>
            <p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Ineffective"><input type="radio" name="effective" id="b3" value="3" <?php echo $b3; ?> required>C</input></p>
       </td>
       </tr>

Answer 1

我使用以下代码来提供工具提示，但不会通过两次点击打扰用户，例如提示在 'a' 部分，而不是单选按钮。

<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">
           <input type="radio" name="indication" id="a1" value="0" <?php echo $a1; ?> required onchange="ajaxFunction('indication','<?php echo $count; ?>','0','<?php echo $row['p_id']; ?>')">
           <a href="#" data-toggle="tooltip" data-placement="top" title="indicated">A</a>
           </input>
           </p>

在平板电脑上使用弹出框

Using popovers for a tablet

javascript

php

jquery

tooltip

popover