CODEWITHSUNDEEP
javascriptjqueryhtmltablet
Barry McDaid1982
Barry McDaid1982

Reputation: 157

Tooltip or pop over for tablet?

I am working on a web app that asks 10 questions, each question carries 3 possible answers. What I need for each answer is a tool tip or pop over that displays a direction for each answer. I have tried using tool tips and pop overs so far, but while the tip is displayed, it requires two clicks to complete the action. Can I do this in one tap, as I need to minimize the amount of taps on the screen. Is there any javascript, or jquery that can solve this problem? Here is the code. 

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

Upvotes: 0

Views: 926

Answers (2)

Shrinivas Shukla
Shrinivas Shukla

Reputation: 4463

You can use title attribute of HTML elements.

It shows when you hover on the elements.

Check out this fiddle.

See the following snippets. (Hover on the text and see different messages)

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

Upvotes: 1

ryano.mcc13
ryano.mcc13

Reputation: 474

It sounds like you want tooltips that are triggered when you hover over them, but you don't get hover actions on tablets (unless you are using a mouse), so this is not possible. So in order to prevent the user from having to click twice on the input, I would suggest some sort of help icon next to the input that they can touch to trigger the tooltip.

Upvotes: 2

Related Questions