平板电脑的工具提示或弹出窗口？

Question

我正在开发一个网络应用程序，它会提出 10 个问题，每个问题都有 3 个可能的答案。每个答案我需要的是一个工具提示或弹出窗口，显示每个答案的方向。到目前为止，我已经尝试过使用工具提示和弹出窗口，但是在显示提示时，需要单击两次才能完成操作。 我可以一键完成吗，因为我需要尽量减少屏幕上的点击次数。有没有可以解决这个问题的javascript或jquery？这是代码。

<script>
$(document).ready(function(){
    $('.radio-inline').tooltip({title: "Indicated!", animation: true}); 

});
</script>
       <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="3" <?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>

       <tr>
       <td class="form-group col-md-6">Is the dosage correct?</td>
       <td class="form-group col-md-6">
           <p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Correct"><input type="radio" name="correctdose" id="c1" value="0" <?php echo $c1; ?> required>A</input></p>
           <p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Marginally Correct"><input type="radio" name="correctdose" id="c2" value="0" <?php echo $c2; ?> required>B</input></p>
           <p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Incorrect"><input type="radio" name="correctdose" id="c3" value="2" <?php echo $c3; ?> required>C</input></p>
       </td>
       </tr>

       <tr>
       <td class="form-group col-md-6"> Are the directions correct? </td>
       <td class="form-group col-md-6">
           <p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Correct"><input type="radio" name="correctdir" id="d1" value="0" <?php echo $d1; ?> required>A</input></p>
           <p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Marginally Correct"><input type="radio" name="correctdir" id="d2" value="0" <?php echo $d2; ?> required>B</input></p>
           <p class="radio-inline" href="#" data-toggle="tooltip" data-placement="top" title="Incorrect"><input type="radio" name="correctdir" id="d3" value="2" <?php echo $d3; ?> required>C</input></p>
       </td>
       </tr>

Answer 1

听起来您希望在将鼠标悬停在它们上方时触发工具提示，但您不会在平板电脑上获得悬停动作（除非您使用鼠标），因此这是不可能的。因此，为了防止用户不得不在输入端上单击两次，我建议在输入端旁边放置某种帮助图标，他们可以触摸它来触发工具提示。

Answer 2

您可以使用HTML 元素的title 属性。

当您在元素上hover 时，它会显示。

看看这个fiddle。

请参阅以下 sn-ps。 （将鼠标悬停在文字上并查看不同的消息）

<span title='This is a greeting'>Hello</span>
<br>
<div title='Do you know what this is?'>Run for your life</div>