CODEWITHSUNDEEP
d3.js
ttmt
ttmt

Reputation: 4984

D3 - position tooltip

I have a plunker here - https://plnkr.co/edit/iOGJUosvruW9KV1FF9lp?p=preview

I have a tooltip that shows when you hover over a bar.

I'm trying to position it in the center of the bar.

How can I position the tooltip so it's in the center of the bar

d3.selectAll('.bar').on("mouseover", function(d){
      let xPos = d3.select(this).attr("x")
      let width = d3.select(this).attr("width")/2
      let tipPos = +xPos+width
      let html = d.day
      console.log('tipPos '+tipPos)
      d3.select('.chart-tooltip').style("display", null)

      d3.select('.chart-tooltip')
      .style("left", tipPos + "px")
      .style("top",  30 + "px")
        .html(html)

    })

    .on("mouseout", ()=>{
      d3.select('.chart-tooltip').style("display", "none")
    })

Upvotes: 0

Views: 345

Answers (1)

Robert Andersson
Robert Andersson

Reputation: 1521

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

Upvotes: 1

Related Questions