Показать инструкцию как подсказку или popover

Question

Мне нужна помощь с кодом. Я создаю веб-приложение для работы на планшете. Часть приложения задает несколько вопросов, а также предоставляет 3 ответа: A, B или C. Каждый ответ содержит краткую инструкцию, которую мне нужно отображать как подсказку или popover. Однако, когда я тестирую всплывающую подсказку на своем ipad, для выбора ответа требуется два щелчка, один для всплывающей подсказки и для ответа.

Если есть какой-либо инструмент, который может сделать это в одном, отобразите инструкцию и ответьте вопрос, выбрав A, B или C?

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

Answer 1

Вы можете сделать это с помощью JQuery Mobile. Рабочий пример: http://jsfiddle.net/Twisty/1hd0phbL/

Ваш HTML:

<table> 
    <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"> 
      <fieldset data-role="controlgroup" data-type="horizontal"> 
       <input type="radio" name="indication" id="a1" value="0" /> 
       <label for="a1">A</label> 
       <div data-role="popup" id="a1-popup"> 
        <p>Instructions for A.</p> 
       </div> 
       <input type="radio" name="indication" id="a2" value="0" /> 
       <label for="a2">B</label> 
       <div data-role="popup" id="a2-popup"> 
        <p>Instructions for B.</p> 
       </div> 
       <input type="radio" name="indication" id="a3" value="5" /> 
       <label for="a3">C</label> 
       <div data-role="popup" id="a3-popup"> 
        <p>Instructions for C.</p> 
       </div> 
      </fieldset> 
     </td> 
    </tr> 
</table> 

Ваш JQuery Mobile:

$(function() { 
    $("#Indication label").click(function() { 
     //Get the ID that this label is for 
     var ida = $(this).attr("for"); 
     // Get the Position for later 
     var pos = $(this).offset(); 
     var ox = pos.left; 
     var oy = pos.top; 
     // Popup the correct tip 
     $("#" + ida + "-popup").popup(
      "open", 
      { x: ox+140, y: oy+50 } 
     ); 
    }); 
}); 

Поскольку таблетки не могут имитировать парит очень хорошо, это сочетает в себе действие выбора ответа и воспитания инструкции в действии одним кликом.