diff --git a/public/vis/components/elements/rect.js b/public/vis/components/elements/rect.js
index 3f33168..1e697cd 100644
--- a/public/vis/components/elements/rect.js
+++ b/public/vis/components/elements/rect.js
@@ -1,5 +1,4 @@
 var d3 = require('d3');
-
 function rect() {
   var color = d3.scale.category10();
   var x = function (d) { return d.x; };
@@ -14,30 +13,85 @@ function rect() {
   var strokeWidth = 0;
   var fillOpacity = 1;
   var strokeOpacity;
+  var yTitle = '';
+  var xTitle = '';
+  var legendTitle = '';
+  var tip = d3.select('body')
+	.append('div').classed('verticesTooltip', true)
+	.attr('opacity', 0)
+	.style({
+	  'position': 'absolute',
+	  'color': 'black',
+	  'font-size': '10px',
+	  'width': 'auto',
+	  'height': 'auto',
+	  'padding': '5px',
+	  'border': '2px solid gray',
+	  'border-radius': '5px',
+	  'pointer-events': 'none',
+	  'opacity': '0',
+	  'background': '#f4f4f4'
+	});
+
+	var _verticaleTooltipShow = function (d) {
+	  debugger;
+	  var strHtml = "";
+	  if(d.data!= undefined && (d.row != null || d.row != undefined)){
+	  	strHtml += '<strong>'+ yTitle +': </strong> ' + d.row + '<br />';
+	  }
+	  if(d.data!= undefined  && (d.col != null || d.col != undefined)){
+	    strHtml += '<strong>'+ xTitle +': </strong> ' + d.col + '<br />';
+      }
+	  if(d != undefined  && (d.value != null || d.value != undefined)){
+		strHtml += '<strong>'+ legendTitle +': </strong> ' + parseFloat(d.value).toFixed(2) + '<br />';
+	}
+	  tip.html(strHtml)
+		.style('left', (d3.event.pageX) + 'px')
+		.style('top', (d3.event.pageY) + 'px')
+		.style('z-index',3000);
+	}
+
+    var _verticesTooltip = function (d) {
+	  if(d.data != undefined){
+		var title = d3.selectAll('text.title');
+		xTitle = title[0][0].textContent || 'Column';
+		yTitle = title[0][1].textContent || 'Row';
+		legendTitle = d3.selectAll('text.text')[0][0].textContent || 'Metric';
+		_verticaleTooltipShow(d);
+		tip.style('opacity', 0.9);
+	  }
+	};
+
+  // hide tooltip of vertices
+  var _verticesTooltipHide = function () {
+    tip.style('opacity', 0);
+  };
 
   function element(selection) {
     selection.each(function (data) {
-      var cells = d3.select(this).selectAll('rect.' + cssClass)
-        .data(data);
-
-      cells.exit().remove();
-
-      cells.enter().append('rect')
-        .attr('class', cssClass);
-
-      cells
-        .attr('x', x)
-        .attr('y', y)
-        .attr('rx', rx)
-        .attr('ry', ry)
-        .attr('width', width)
-        .attr('height', height)
-        .style('fill', fill)
-        .style('fill-opacity', fillOpacity)
-        .style('stroke', stroke)
-        .style('stroke-width', strokeWidth)
-        .style('stroke-opacity', strokeOpacity);
-    });
+	var cells = d3.select(this).selectAll('rect.' + cssClass)
+	.data(data)
+	.on('mouseover', _verticesTooltip)
+	.on('mousemove',_verticaleTooltipShow)
+	.on('mouseout', _verticesTooltipHide);
+
+	cells.exit().remove();
+
+	cells.enter().append('rect')
+	.attr('class', cssClass);
+	cells
+	.attr('x', x)
+	.attr('y', y)
+	.attr('rx', rx)
+	.attr('ry', ry)
+	.attr('width', width)
+	.attr('height', height)
+	.style('fill', fill)
+	.style('fill-opacity', fillOpacity)
+	.style('stroke', stroke)
+	.style('stroke-width', strokeWidth)
+	.style('stroke-opacity', strokeOpacity);
+	});
   }
 
   function colorFill(d, i) {