How to customize Hoverinfo of a Heatmap?

I have a heatmap with x and y axes titled (‘left’, ‘right’).
I am wondering how to use the text attribute to change the “‘x’:, ‘y’:, ‘z’:” to something else.

I plot the heatmap with following data:
var data = [
{
z: [[1, 20, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
x: X,
y: Y,
type: ‘heatmap’
}
];

Here’s how: http://codepen.io/etpinard/pen/WxLGoo?

Wow, coooool! Thanks a lot!

Thanks to your code and I know how to map the value to each hover now.