Hover Table over Link Column like Editor Price Page?
Hover Table over Link Column like Editor Price Page?
davidhcdm
Posts: 7Questions: 1Answers: 0
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?
This discussion has been closed.
Replies
[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