Highlight td which shows tooltip

HTML

<script src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css">
<table>
<tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
<tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
<tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
<tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
<tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
</table>

CSS

td {
    border:1px solid #000000;
    padding:5px;
}
table {
    margin: 20px;
}
.active {
    background-color: #FF0000;
}

JavaScript

$(function() {
    $("tr").each(function() {
        $(this).qtip({
            content: {
                text: "Testt tttttte ttt IT"
            },
            position: {
                my: 'top center',
                at: 'bottom center'
            },
            events: {
                show: function(event, api) {
                    api.elements.target.addClass("active");
                },
                hide: function(event, api) {
                    api.elements.target.removeClass("active");
                }
            }
        });
    });
});