Skip to content

Instantly share code, notes, and snippets.

@milafrerichs

milafrerichs/index.html

Last active September 2, 2019 10:04
Show Gist options
  • Save milafrerichs/ba6325c7c36c1d41ca3592c4f6d24881 to your computer and use it in GitHub Desktop.
Save milafrerichs/ba6325c7c36c1d41ca3592c4f6d24881 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A simple tooltip in d3.js - https://mappingwithd3.com/resources/d3/tooltip/</title>
</head>
<body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="index.js"></script>
<a href="https://mappingwithd3.com/resources/d3/tooltip/">A simple tooltip tutorial in d3.js</a>
</body>
</html>
Raw
index.js
d3.select('body').append('div').attr('id', 'tooltip').attr('style', 'position: absolute; opacity: 0;');
d3.select('body').append('svg').attr('width', 300).attr('height', 300);
d3.select('svg').selectAll('circle').data(['a','b','c'])
.join('circle')
.attr('r', 3)
.attr('cy', 5)
.attr('cx', (d,i) => i*15+15)
.on('mouseover', function(d) {
d3.select('#tooltip').transition().duration(200).style('opacity', 1).text(d)
})
.on('mouseout', function() {
d3.select('#tooltip').style('opacity', 0)
})
.on('mousemove', function() {
d3.select('#tooltip').style('left', (d3.event.pageX+10) + 'px').style('top', (d3.event.pageY+10) + 'px')
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment