Код для style.css
p.tt {position: relative;}
a.tooltip:hover { background:#FFFFFF; text-decoration:none; }
a.tooltip span { display:none; width:250px; text-align: left; }
a.tooltip:hover span { display:block; position:absolute; z-index: 100; top: 20px; left: 45px; border: 1px solid #565656; padding: 5px 5px; background: #FFFFFF; color:#3A3A3A; }
Пример html кода:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tooltip на Jquerty</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p class="tt">
При наведение курсора на <a class="tooltip" href="#">этот текст<span>Вот и всплывающая подсказка</span></a> появится всплывающая подсказка.
</p>
</body>
</html>он нормально работает, но есть проблема: если заключить его в цикл(код ниже) , - перестает работать.
В чем ошибка и как ее исправить?
<style type="text/css">
.hovertip {
position: absolute;
display: none; /* in case javascript is disabled */
width: 270px;
height:350px;
background: url('sub-bg.png') no-repeat;
font-size: 10px;
z-index: 100;
margin-left: 5px;
margin-top: 10px;
}
p.tt {position: relative;}
a.tooltip:hover {background: #FFFFFF; text-decoration:none; }
a.tooltip span { display:none; width:250px; text-align: left; }
a.tooltip:hover span { display:block; position:absolute; z-index: 100; top: 10px; left: 200px; background: url('sub-bg.png') no-repeat; color:#3A3A3A; }
</style>
<?php
$db = new mysqli('localhost', 'root', '', 'asser');
if (!$db){echo "not connected!!!";}
else
{
echo '<table border="0">';
for($a=1;$a<=50;$a++){
echo '<tr id="'.$a.'">';
for($b=1;$b<=50;$b++){
$query = 'select * from table where ids = "'.$a.'.'.$b.'"';
$result = $db->query ($query);
$row = $result->fetch_assoc();
$row['colours'];
$colours = $row['colours'];
echo '<td height="10" width="10" style="font-size:5" bgcolor="'.$colours.'" id="'.$a.'.'.$b.'">';
echo '<p class="tt">
<a class="tooltip" href="#">3123<span class="hovertip"></span></a>
</p>';
echo '</td>';
}
echo '</tr>';
}
echo '</table>';
}
?>
