動態工具提示引導

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>