April 10, 2012
easyToolTip jquery shows two tables
Question by Behrooz A
I have this code :
<td><table class="inner">
<?php
foreach($inner_info as $k=>$v)
{
if($v['type']=="pardakhti"){
echo "<tr><td title='<table>
<tr>
<td><strong>نوع پرداخت</strong></td>
<td>".convert_pay_type($v['pay_type'])."</td>
</tr>
<tr><td>تاریخ</td><td>".$v['date']."</td></tr>
</table>'>".$v['amount']."</td></tr>";
}
else{
echo "<tr><td>0</td></tr>";
}
}
?>
</table>
</td>
and the jquery part is :
$(document).ready(function(){ $("td").easyTooltip();
$("td").easyTooltip({ tooltipId: "easyTooltip2", }); });
and CSSes are :
#easyTooltip2{
padding:5px 10px;
border:1px solid #195fa4;
background:#195fa4 url(bg.gif) repeat-x;
color:#fff;
}
#easyTooltip2 table{
margin: 0px;
font-size: 10px;
}
#easyTooltip2 td{
font-size: 10px;
border:none;
}
.inner td {
text-align: center;
height: 10px;
box-shadow: none;
padding: 10px;
}
but it appears wrongly, the screenshot link : 
what’s wrong here?
as you can see there is an underlay table with wrong width and height and padding that should completely be removed . why is there two tables?
thank you in advance
Answer by Starx
That is just plain wrong. A whole table as an atrribute??
<td><table class="inner">
<?php
foreach($inner_info as $k=>$v)
{
if($v['type']=="pardakhti"){
echo "<tr><td><table>
<tr>
<td><strong>نوع پرداخت</strong></td>
<td>".convert_pay_type($v['pay_type'])."</td>
</tr>
<tr><td>تاریخ</td><td>".$v['date']."</td></tr>
</table>'".$v['amount']."</td></tr>";
}
else{
echo "<tr><td>0</td></tr>";
}
}
?>
</table>
</td>
Even with this, there are two tables coming up.
I suggest this markup
<td>
<?php
foreach($inner_info as $k=>$v)
{
if($v['type']=="pardakhti"){
echo "<strong>نوع پرداخت</strong>".
convert_pay_type($v['pay_type']).
"<span>تاریخ</span>".
$v['date'].
$v['amount'];
}
else{
echo "0";
}
}
?>
</td>
