Grid cell tooltip

by sunilbg

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="parent">
    <p id='chart'></p>
</div>

CSS

.parent {
    height:400px;
	width:200px;
    overflow-y:auto;
    overflow-x:auto;
    }

 svg{
    background: lightgray;
    height:600px;
	width:600px;	
    }


circle {
    stroke: #fff;
}

.selected{
    fill: blue;
}

JavaScript

var data = {
      name: "layout",
      children: [
          { name: "AxisLayout", size: 6725 },
          { name: "BundledEdgeRouter", size: 3727 },
          { name: "CircleLayout", size: 9317 },
          { name: "CirclePackingLayout", "size": 12003 },
          { name: "DendrogramLayout", "size": 4853 },
          { name: "ForceDirectedLayout", "size": 8411 },
          { name: "IcicleTreeLayout", "size": 4864 },
          { name: "IndentedTreeLayout", "size": 3174 },
          { name: "Layout", "size": 7881 },
          { name: "PieLayout", "size": 2728 },
          { name: "RadialTreeLayout", "size": 12348 },
          { name: "AxisLayout", size: 6725 },
          { name: "BundledEdgeRouter", size: 3727 },
          { name: "CircleLayout", size: 9317 },
          { name: "BundledEdgeRouter", size: 3727 },
          { name: "AxisLayout", size: 6725 },
          { name: "BundledEdgeRouter", size: 3727 },
          { name: "CircleLayout", size: 9317 },
          { name: "AxisLayout", size: 6725 },
          { name: "BundledEdgeRouter", size: 3727 },
          { name: "CircleLayout", size: 9317 },
          { name: "CirclePackingLayout", "size": 12003 },
          { name: "CirclePackingLayout", "size": 12003 },
          { name: "AxisLayout", size: 6725 },
          { name: "BundledEdgeRouter", size: 3727 },
          { name: "CircleLayout", size: 9317 },
          { name: "CirclePackingLayout", "size": 12003 },
          { name: "CircleLayout", size: 9317 },
          { name: "CirclePackingLayout", "size": 12003 },
          { name: "DendrogramLayout", "size": 4853 },
          { name: "ForceDirectedLayout", "size": 8411 },
          { name: "IcicleTreeLayout", "size": 4864 },
          { name: "IndentedTreeLayout", "size": 3174 },
          { name: "Layout", "size": 7881 },
          { name: "PieLayout", "size": 2728 },
          { name: "RadialTreeLayout", "size": 12348 },
          { name: "AxisLayout", size: 6725 },
          { name:...