make tooltips responsive

[HagerDakroury]

While reproducing #189, I noticed that the tooltip is not responsive (gets cropped when resizing the browser)

It should be accommodating this by wrapping or moving to the center/left.

[bryan-brancotte]

Good point, I have no clue on how to do it !

[HagerDakroury]

hi, @bryan-brancotte I'm trying to start tackling this but I'm clueless as well. Do you think we can try to figure it out together?
I think the first direction may be to look into styling this in a more responsive way (however the main details panel is responsive normally so maybe that's not the issue here)

Any thoughts on where to start?

[bryan-brancotte]

Hi @HagerDakroury , I hopped you had a clue when you created the issue because I did not have one. Just an idea, but maybe we can at this moment get to know the width of the tooltip container, the width of the container and adapte it to not overflow (tooltip.width=min(400,parent.width-tooltip.x)). We would also switch to rendering it on the left of the pointer when we see that x+width>width of the parent. This idea are very speculative, I hope It will help.

[HagerDakroury]

@bryan-brancotte are the offsets here based on trial and error? code

I'm at the stage of toggling the tooltip to the left but not sure what offset to follow. Or if there is a way to easily mirror the positions?

[bryan-brancotte]

Yes, the offsets were manually set to place it close to the pointer but not on it.

On the left is a good option, maybe in d3.js there is a way to have tooltip, but I am not aware of so at the time I built the tooltip as it is, with manual location and placement. So here I would go for a tooltip.style("left", (d3.event.layerX-20-width_of_the_tooltip) + "px")

[HagerDakroury]

Yes, the offsets were manually set to place it close to the pointer but not on it.

On the left is a good option, maybe in d3.js there is a way to have tooltip, but I am not aware of so at the time I built the tooltip as it is, with manual location and placement. So here I would go for a tooltip.style("left", (d3.event.layerX-20-width_of_the_tooltip) + "px")

Thanks a lot! 💯 I was stuck for a while doing the math 😄