I am developing a Gant chart using PHP and purely based on table architecture. What I need is that when user mouse over the data
echo "<td colspan=$duration align=center
bgcolor=$color>$description
";
to show a tool tip with some related information. Any guidance please.
Below is part of my codes.
foreach ($this->activities as $activity) {
$start = $activity['start'];
$end = $activity['end'];
$description = $activity['description'];
$color = $activity['color'];
$before = $start;
$duration = $end - $start + 1;
$after = $this->end - $end;
echo "<tr>
";
if ($before > 0) {
echo "<td colspan=$before>
";
}
echo "<td colspan=$duration align=center
bgcolor=$color>$description
";
if ($after > 0) {
echo "<td colspan=$after>
";
}
}
echo "</table>
";
}
}
I would use Twitter Bootstrap (getbootstrap.com) or qTip2 (qtip2.com) - they have very good examples how it works. Basically what you need to do is simple: 1. Get the data you want the tooltip to contain. 2. Print it as part of the object that you want to use it on ( <button title="Some Tooltip Here">Some Button Text</button> - Example usage with both of the plugins I gave you above ) 3. Add JS code that defines that the object you want has tooltip on it. Example:
$(document).ready(function () {
$('[title!=""]').qTip();
}
This code will enable the tooltip for all of the object that have title attribute ( Code from qTip2's official documentation )