Skip to content

Instantly share code, notes, and snippets.

Last active February 9, 2016 00:19
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Absolute-Positioned Tooltip
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 12px;
padding: 8px;
margin-top: -20px;
font: 10px sans-serif;
background: #ddd;
pointer-events: none;
<script src="//"></script>
var width = 960,
height = 500;
var svg ="body").append("svg")
.attr("width", width)
.attr("height", height);
.attr("transform", "translate(480,50) rotate(60) scale(2)")
.attr("width", 140)
.attr("height", 140)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
var div ="body").append("div")
.attr("class", "tooltip")
.style("display", "none");
function mouseover() {"display", "inline");
function mousemove() {
.text(d3.event.pageX + ", " + d3.event.pageY)
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 12) + "px");
function mouseout() {"display", "none");
Copy link

Can we apply anything instead of

   .style("left", (d3.event.pageX - 34) + "px")
  .style("top", (d3.event.pageY - 12) + "px"); 

because when i use this the tooltip is not displaying in its position correctly.....

Below two things also not working:

          .style("left","cx") + "px")     
          .style("top","cy") + "px");
           .style("left", dx + "px")     
      .style("top", dy + "px");

Can i have good solution for this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment