I am designing a page that is to be used for a tablet, it is a web app. I have several questions in the app, each question has 3 answers A, B, or C. I want to show an instruction above each answer if selected. I have used tooltip so far, but when I test it on a tablet it requires two click, on to show the instruction and one to actually select the answer. Can I do this in one click, and could popovers work?
Here are two of the questions
<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>
I used the following code to provide a tooltip, but in a way that did not interrupt the user with two clicks e.g. the tip was on the 'a' part, not the radio button.
<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>