Question

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.

Answer 1

Because your page would have a lot of <td><div></div></td>s from generated HTML (by PHP), and all matches td div, all of them would show if you were to call $('td div').//so on

So you need to specify which one you want to show, and in your case you want the one near to the element that is focused or blurred. jQuery is good at that.

$("textarea").focus(function(){
    var targetArea = $(this);
    targetArea.siblings('div').fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"})
        .html(targetArea.val());
});

Also, as per @joeltine answer, you also need to show only the html for that textarea too, so also use the same $(this) in your html call parameter.

For performance, you may want to chain them together and cache $(this) to a variable as above too – the $ constructor is expensive.

And one more thing, you seem to set css when it fades in and fades out, but they are not necessary – when you can set it in a css file instead. Their style can’t be seen if you set it beforehand and they are not shown (by display: none) anyway.

$("textarea").focus(function(){
    var targetArea = $(this);
    targetArea.siblings('div').fadeIn(400).html(targetArea.val());
});

and in CSS:

/* You really want to apply this css to all "td div" for this one! */
td div {
   background-color: #E7F1F0;
   border: 1px solid #86BBB6;
   /* More styles for tooltips, such as display: none; position: relative; etc... */
}