Question

I need to display 2 sets of content when a table row is hovered.
The pre-hovered state displays generic information in the two target areas 1 Explanation and [2] Actions.
When user hovers a table row, the Explantation and Actions content are replaced with the relevant content relating to the hovered row.
By way of illustration, this is what I’m looking to achieve:

Thanks for any pointers.

Answer 1

This could be achieved using the qTip (2) Jquery plugin for tooltips: http://craigsworks.com/projects/qtip2/

You can have multiple tooltips active, one for the row and one for the cells.

// Create our first tooltip
$('.selector').qtip({
    content: 'I\'m just one of many tooltips that will render on this element...',
    position: {
        my: 'top left', at: 'bottom right'
    }
})

// Remove the previous tooltips data
.removeData('qtip')

// Create our second tooltip
.qtip({
    content: 'I\'m just one of many tooltips that will render on this element...',
    style: {
        classes: 'ui-tooltip-blue'
    }
});

Source: http://craigsworks.com/projects/qtip2/tutorials/advanced/#multi

What I gave you above is just an example. You need to play around with qTip2 to get the wanted effect.