动态工具提示引导

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和所有class="tooltip1"也一样tooltip1 tooltip2，你必须添加每个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>