I was working on a tooltip from scratch. The code for the tooltip has been added below.
Issue with following code:
The tooltip fades in and out on focussing or blurring on the text-area but the problem is, all the tooltips (tooltips corresponding to all the elements) fade in and out simultaneously.
The second issue is that the value of the text-area is same in all the tooltips which is the value of the first text-area.
PHP
<?php for($j; $j<5; $j++) { ?>
<tr>
<td style="position:relative"><?php echo CHtml::activeTextArea($PackageDeal,"package[$j][1]") ; ?>
<div style="color:#0D776e;font-size:15px;font-family:calibri;padding:1%;margin:0 0.5%;;word-wrap:break-word;display:none;z-index:100;width:200px;mion-height:25px;position:absolute;top:30px;"></div>
</td>
</tr>
<?php }?>
Jquery
<script src="jquery-1.8.3.min.js"></script>
<script>$(document).ready(function(){
$("textarea").focus(function(){
$("td div").fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
$("td div").html($("textarea").val());
});
$("textarea").blur(function(){
$("td div").fadeOut(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
});
$("textarea").keyup(function(){
$("td div").html($("textarea").val());
});
});
</script>
The issue is that I'm using this tooltip in a PHP for loop and I tried variety of ways so that the tooltip is functional. I need to ask whether I should keep an Id / Class for the tooltip (div element) and for the text-areas so that the text shown is different in all and all of them don't show up simultaneously. Also I would like to know whether this is a jquery, php or html related issue. Thanks in Advance!
P.S. the tooltip works fine for single element.