動的なツールチップのブートストラップ

Question

良い日私は内部の複数の入力フィールドにツールチップを表示しようとしています。ここに私のスクリプトです。今の

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>

は、私はそれstaticを行うことができますよ。だから、私は複数の場所を入力する場合はtooltip-title &と私は、ツールチップを使用する複数のテキストフィールドがありますか？

例：

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

事前に感謝して

Answer 1

私の悪い英語のため申し訳ありません現在、クラスtooltip1を持つすべての入力がtooltip1val（最初のコード切り取ら）上記変更された入力からデータを取得します。あなたがマルチ行いたい場合は

のような、各id="tooltip1val"はtooltip1val tooltip2valのような独自のインデックスを持つべきであるとtooltip1 tooltip2のような、すべてのclass="tooltip1"、あなたはそのような各id="tooltipXval$(document).on("change" script

何かを追加する必要があります。

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