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

Question

我正在做一个web应用程序，问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

请看下面的代码片段。(将鼠标悬停在文本上，可以看到不同的消息)

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