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

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

显示元素hover的时间。

查看此fiddle。

请参阅以下代码段。（将鼠标悬停在文本上并查看不同的消息）

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

Answer 2

听起来你想要将鼠标悬停在它们上方时触发的工具提示，但你不能在平板电脑上进行悬停操作（除非你使用的是鼠标），所以这是不可能的。因此，为了防止用户必须在输入上单击两次，我建议他们可以触摸输入旁边的某种帮助图标以触发工具提示。

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

2 个答案: