Create a gist now

Instantly share code, notes, and snippets.

@wrobstory /README.md
Last active Dec 29, 2015

What would you like to do?
D3 Tooltips
//Pattern from: http://www.biovisualize.com/2012/07/embedding-d3js-in-blog-post.html
d3.helper = {};
d3.helper.tooltip = function(){
var tooltipDiv;
var bodyNode = d3.select('body').node();
function tooltip(selection){
selection.on('mouseover.tooltip', function(pD, pI){
// Clean up lost tooltips
d3.select('.body').selectAll('div.tooltip').remove();
// Append tooltip
tooltipDiv = d3.select('body')
.append('div')
.attr('class', 'tooltip');
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style({
left: (absoluteMousePos[0] + 5)+'px',
top: (absoluteMousePos[1]) + 'px',
'background-color': '#d8d5e4',
width: '65px',
height: '30px',
padding: '5px',
position: 'absolute',
'z-index': 1001,
'box-shadow': '0 1px 2px 0 #656565'
});
var first_line = '<p class="tooltip">X-Value: ' + pD.index + '</p>';
var second_line = '<p class="tooltip">Y-Value: ' + pD.value + '</p>';
tooltipDiv.html(first_line + second_line);
})
.on('mousemove.tooltip', function(pD, pI){
// Move tooltip
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style({
left: (absoluteMousePos[0] + 5)+'px',
top: (absoluteMousePos[1])+'px'
});
})
.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;
};
return tooltip;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment