x-unified hover tooltips overflow

[xenatisch]

Synopsis

The hover tooltips in x-unified mode exceed max-width and therefore overflow. This happens when:

• the chart is small and close to the sides
• the chart is large (near width size) on a small screen - e.g. mobile
• the tooltip is displayed for a point on the chart that falls near the mid-point of the x-axis

The issue persists in Plotly v2.0.0.

Example

You can see an example of the issue on our live service, provided that your browser width is smaller than ~580px.

Expected behaviour

The hover tooltip x-extrema must always fall between x-extrema of the browser. An even better outcome would be for the tooltip to not spill out of the cartesian axes.

I don't think there's an easy / immediate solution to this, primarily because the tooltip position moves based on cursor position. I suppose one way to address it is to do what folks at Google Charts have done - i.e. move the tooltip until it hits one side, then stop moving horizontally.

Here's an example, which you've probably seen before:

[Credit: Google]

Thanks again for all your efforts.

[nicolaskruchten]

I actually think this is "just a bug" where the hoverlabel should be on the left-hand side if there is room there. If there not enough room on either side then yes, we will need some new behaviour.

[alexcjohnson]

Seems like in this plot we've set the figure width to a half-integer, and perhaps due to rounding that's allowing us to draw the hover label 1px beyond the true displayed edge of its container. If we keep all our hover labels 1px away from the edges no matter what (just change by 1px the condition for flipping the label to the left side), that should fix this.

[nicolaskruchten]

The hoverlabel looks like it's much more than 1px beyond the edge, though, no?

[nicolaskruchten]

Ah I see, this is just a really wide hoverlabel and there is a zone where there is no room on either the left or the right :(

In this case @xenatisch I would recommend using newlines i.e. <br> in the hovertemplate if you can on narrow screens? Like before "daily" or something?

[alexcjohnson]

Ah right, x unified doesn't seem to have the centered fallback for when there isn't room on either side like closest and x modes have. We should add that. But I was definitely able to get a situation where there was plenty of room on the left for the whole label, yet it was shown on the right side with just 1px border cut off. So I think we should pad it 1px as well.

[xenatisch]

So, there are two issues here - one is ours, the other is yours:

• Some of our labels are just too long, and that needs to be fixed. This is something for our content team to think about as the labels are set dynamically.
• Where the labels aren't toooo long, some of the tooltips still overflow, and that's the topic of this issue.

In the latter case, as you highlighted eloquently, there is indeed enough space on one side, but the tooltip still overflows without using the space that's available. This, however, tends to happen when we're near the mid-point. How close to the mid-point? That would depend on the width of the tooltip itself.

This clip shows the problem more clearly (I think / hope):

Here's the link to the graph in the clip in case you want to experiment with it yourself.

tooltip-thing.mov

[xenatisch]

Hallelujah. Thanks @nicolaskruchten, @archmoj, and @alexcjohnson. Looking forward to 2.3.0.