score:1

Accepted answer

You could select the y and height attr and set it like this

d3.selectAll('.bar').on("mouseover", function(d){
  let xPos = d3.select(this).attr("x")
  let width = d3.select(this).attr("width")/2
  let thisHeight = Number(d3.select(this).attr("height")) / 2
  let thisY = Number(d3.select(this).attr("y"))
  let tipPos = +xPos+width
  let html = d.day

  console.log(thisHeight, thisY)
  d3.select('.chart-tooltip').style("display", null)

  d3.select('.chart-tooltip')
  .style("left", tipPos + "px")
  .style("top",  margin.top + thisY + thisHeight + "px") // <-- Here
    .html(html)

})

And the label will be appended to the middle, here's a fork

Plunker


Related Query

More Query from same tag