Search code examples
javascriptphpjquerytooltippopover

Using popovers for a tablet


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>

Solution

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