index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="./tooltip.js"></script>
</head>
<body>
<div class="viz"></div>
<script type="text/javascript">

    var sampleSVG = d3.select('.viz')
            .append('svg')
            .attr({width: 600, height: 100});

    var data = d3.range(5).map(function(d, i){ return ~~(Math.random()*100); })

    sampleSVG.selectAll('circle')
            .data(data)
            .enter().append('circle')
            .style({stroke: 'gray', fill: 'aliceblue'})
            .attr({r: 40, cx: function(d, i){ return i*100 + 50; }, cy: 50})
            .call(d3.helper.tooltip()
                .attr({class: function(d, i) { return d + ' ' +  i + ' A'; }})
                .style({color: 'blue'})
                .text(function(d, i){ return 'value: '+d; })
            )
            .on('mouseover', function(d, i){ d3.select(this).style({fill: 'skyblue'}); })
            .on('mouseout', function(d, i){ d3.select(this).style({fill: 'aliceblue'}); });

</script>
</body>
</html>

## tooltip.js
    d3.helper = {};

    d3.helper.tooltip = function(){
        var tooltipDiv;
        var bodyNode = d3.select('body').node();
        var attrs = {};
        var text = '';
        var styles = {};

        function tooltip(selection){

            selection.on('mouseover.tooltip', function(pD, pI){
                var name, value;
                // Clean up lost tooltips
                d3.select('body').selectAll('div.tooltip').remove();
                // Append tooltip
                tooltipDiv = d3.select('body').append('div');
                tooltipDiv.attr(attrs);
                tooltipDiv.style(styles);
                var absoluteMousePos = d3.mouse(bodyNode);
                tooltipDiv.style({
                    left: (absoluteMousePos[0] + 10)+'px',
                    top: (absoluteMousePos[1] - 15)+'px',
                    position: 'absolute',
                    'z-index': 1001
                });
                // Add text using the accessor function, Crop text arbitrarily
                tooltipDiv.style('width', function(d, i){ return (text(pD, pI).length > 80) ? '300px' : null; })
                    .html(function(d, i){return text(pD, pI);});
            })
            .on('mousemove.tooltip', function(pD, pI){
                // Move tooltip
                var absoluteMousePos = d3.mouse(bodyNode);
                tooltipDiv.style({
                    left: (absoluteMousePos[0] + 10)+'px',
                    top: (absoluteMousePos[1] - 15)+'px'
                });
                // Keep updating the text, it could change according to position
                tooltipDiv.html(function(d, i){ return text(pD, pI); });
            })
            .on('mouseout.tooltip', function(pD, pI){
                // Remove tooltip
                tooltipDiv.remove();
            });

        }

        tooltip.attr = function(_x){
            if (!arguments.length) return attrs;
            attrs = _x;
            return this;
        };

        tooltip.style = function(_x){
            if (!arguments.length) return styles;
            styles = _x;
            return this;
        };

        tooltip.text = function(_x){
            if (!arguments.length) return text;
            text = d3.functor(_x);
            return this;
        };

        return tooltip;
    };