CODEWITHSUNDEEP
d3.js
ttmt
ttmt

Reputation: 4984

Get width of element

I have a demo here

I have a stacked area chart with a mouseover that shows a tooltip with data for that area of the chart.

I want the tooltip to be centered over the top of the area the mouse is over (the highlighted rectangle).

To center it I need the width of the tooltip.

I'm trying to do this with 

 .on('mouseover', function(d, i){
    const tooltip = d3.select('.chart-tooltip').node();
    const tooltipWidth = tooltip.getBoundingClientRect();
    console.log(tooltipWidth)

but the console.log returns 0

I think this is because the tooltip is not being displayed.

Is it possible to get the width of the tooltip.

Upvotes: 2

Views: 329

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

You have to use getBoundingClientRect after setting the div's html, as well as the display: block;:

tooltipDis.html(html)
    .style("display", 'block');

const tooltipWidth = tooltip.getBoundingClientRect();

Here is the forked code: https://stackblitz.com/edit/nh4d3u-cndykk?file=src/app/bar-chart.ts

Upvotes: 3

Related Questions