Fix text position in centered tooltips #2154

[rmoestl]

Suggested fix for plotly#2154. Added test mock seems to cover plotly#865 as well.

Regarding the fix:

• Deleted the lines in alignHoverText because it fixes the scenario in question and because I wasn't able to figure out the intent of these four lines of code.
• To figure out the intent, I also tracked down the origin of this piece of code: it was introduced in 2e69310. I studied the change set of this commit and its message, but wasn't able to understand the exact intent either.
• I'm not entirely sure that the deleted lines are relevant for certain kinds of plots. I guess a more experienced contributer is able to make a better judge.

Regarding tests:

• I added a mock that reproduces the issue and have noticed that for each mock there's an image as the rendered result. This image is missing in this commit, because I'm not sure how to run the image pixel tests described in image test README and trigger the required hover event.

Regarding related issue plotly#865:

• Added test mock shows the problem when two tooltips overlap.

[alexcjohnson]

Can you include a screenshot of what a centered label looks like now?

Just for reference: the idea is that hoverPoints routines return a label along with a box to position it outside of (x0, x1, y0, and y1). Then we first try to put it on the right side (ie pointing at x1 from the right), if that fails we try to point it at the left side of x0, and if BOTH of those fail, that's the situation here, where the box is too big to put the label on either side. Then the idea is to fall back on centering the hover label in the box, but showing all the same information.

[alexcjohnson]

Yep, this is one of the situations that trigger a centered label, when the text to be displayed is extra long. The other common one is a single-bar bar chart filling the whole plot area. I'm not sure we need a mock for this though, as image tests won't show hover labels - I think better would be to just generate these conditions as jasmine tests in https://github.com/plotly/plotly.js/blob/master/test/jasmine/tests/hover_label_test.js, and verify something about the label positioning/shape.

[rmoestl]

I was able to add a Jasmine test.

However, while figuring out a minimal plot configuration to provoke the behavior, I think I got a better understanding what the problem is. The bug only occurs when there's more than one category (trace) which results in hover info displaying the trace name as the secondary text.

But when there's not enough space and hence hover info is centered, the display of the category name is positioned underneath the primary hover info element at the moment. Here's a screenshot to underpin my findings:

trace1 is visible while trace0 is hidden underneath the centered, blue hover info box.

Which leads me to the assumption that the intent of suspect code is to position the secondary hover info (trace0) left (or right) to the primary one. txx is the x position of the primary text. tx2x the x position of the secondary one. The code in question I deleted in the first commit of this PR:

if(d.anchor === 'middle') {
    txx -= d.tx2width / 2;
    tx2x -= d.tx2width / 2;
}

Here's a screenshot of placing the secondary hover info left to the primary one:

Would this be a good solution?