How to get selected table cells background colour?

Question

I have a table which displays information. One of the columns in the table is a notes column. On this notes column I've created a tool tip using some CSS and Jquery. The problem I'm having is that when I hover over the cell, it displays the tool tip correctly, however it wipes the colour (turns white) from the cell after moving the mouse away. I want it to retain its colour after the mouse it moved away, but I'm not sure how.

Current code for the tool tip event (each notes cell has the note class):

$('.note').hover(
       function (event) {
           $(event.target).css({
               "white-space": "normal",
               "text-overflow": "clip",
               "background-color": "#eeeeee",
               "max-width": "200px",
               "position": "absolute"
           });
       }, function (event) {
           $(event.target).css({
               "white-space": "nowrap",
               "text-overflow": "ellipsis",
               "background-color": "transparent",
               "max-width": "200px",
               "position": "static"
           });
       }
   );

Answer 1

Its better to use pure css for this purpose,

.note:hover {
    white-space: normal;
    text-overflow: clip;
    background-color: #eeeeee;
    max-width: 200px;
    position: absolute;
}

In this case, elements will retain the background color and other properties after hover.