动态工具提示引导程序

Question

Good day I'm trying to showing a tooltip in multiple input fields inside. Here is my script.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script>
  $(document).ready(function(){
  
    $(document).on("change",'#tooltip1val',function(){
      $('.tooltip1').attr('title',$(this).val());
  
    })
 });
</script>

<table>
<tr>
  <td>Tooltip 1<input data-toggle="tooltip"  id="tooltip1val" type="text"></td>
</tr>

</table>
------------------
<table>
<tr>
  <td>Result 1<input class="tooltip1" 
                     type="text">
  </td>
   <td>Result 1<input class="tooltip1"
                     type="text">
  </td>
</tr>

</table>

For now i'm only able to do it static. So, what if i have multiple place to input the tooltip-title & And i have multiple textfield(s) to use the tooltip?

example :

<table>
<?php for($x=0;$x<8;$x++){?>
<tr>
  <td>Tooltip <?php echo $x;?><input id="tooltip1val" type="text"></td>
</tr>
<?php } ?>
</table>
------------------
<table>
<?php for($x=0;$x<8;$x++){?>
<tr>
  <td>Result  <?php echo $x;?><input data-toggle="tooltip" class="tooltip1"
                     type="text">
  </td>
   <td>Result  <?php echo $x;?><input data-toggle="tooltip" class="tooltip1" 
                     type="text">
  </td>
  <?php } ?>
</tr>

Thanks in advance and sorry for my bad english

</div>

Answer 1

Currently all inputs with class tooltip1 will get the data from the changed input above tooltip1val (first code snipped).

If you want to do multi like, then each id="tooltip1val" should have own index like tooltip1val tooltip2val and all class="tooltip1" also, like tooltip1 tooltip2 and you have to add for each id="tooltipXval an $(document).on("change" script

Something like that:

<table>
<?php for($x=0;$x<8;$x++){ ?>
<tr>
  <td>Tooltip <?php echo $x;?><input id="tooltip<?php echo $x;?>val" type="text">
  <script>
    $(document).ready(function(){
      $(document).on("change",'#tooltip<?php echo $x;?>val',function(){
        $('.tooltip<?php echo $x;?>').attr('title',$(this).val());
      })
   });
  </script>
 </td>
</tr>
<?php } ?>
</table>
------------------
<table>
<?php for($x=0;$x<8;$x++){?>
<tr>
  <td>Result<?php echo $x;?><input data-toggle="tooltip" class="tooltip<?php echo $x;?>" type="text"></td>
  <td>Result<?php echo $x;?><input data-toggle="tooltip" class="tooltip<?php echo $x;?>" type="text"></td>
</tr>
<?php } ?>
</table>