Hover Table over Link Column like Editor Price Page?

davidhcdm

On the Editor Pricing page there is a datatable that shows price conversion information when you hover over the price in the table. I want to do almost the same thing; show detail information in a hover table. I've googled and inspected the page itself and I see that the css is setting up the .curr class but I can't find how you render the datatable. Can you show how you did it?

allan

Absolutely. It isn't a DataTable - its just a plain HTML table that one, there wasn't any need to add sorting, filtering etc to it, but the principle is exactly the same. This is the code that I use for the currency hover box:

[code]
// Currency
$(document).ready( function () {
$('.curr')
.on( 'mouseenter', function () {
var that = this;

if ( ! this._curr ) {
var price = parseFloat( that.innerHTML.replace(/[^\d\.]/g, '') );
this._curr = $(
''+
'£'+price+' in other currencies using current exchange rates:'+
''+
''+
'$'+((price * us_rate).toFixed(2))+' (USD)'+
''+
''+
'€'+((price * euro_rate).toFixed(2))+' (EUR)'+
''+
''+
''
);
}

var offset = $(this).offset();
$(this._curr)
.stop()
.css( {
top: offset.top + $(this).height() + 12,
left: offset.left + ($(this).width()/2)
} )
.appendTo( 'body' )
.fadeIn();
} )
.on( 'mouseleave', function () {
$(this._curr)
.stop()
.fadeOut( function () {
$(this).remove().css('opacity', 1);
} );
} );
} );
[/code]

So basically just built the HTML needed and put it into a node which is then shown.

Allan

davidhcdm

Allen, I hate to bring this back up but I'm on another project now and have a requirement similar to this. I need to show a data element (from a hidden column maybe?) when I mouse over a td. Kind of like showing a detail popup of a particular cell. The detail com back from the server in the same row as the other data. Another way to think of it would be like showing a description when I hover over a title. Can you help me with this?