Plotly.js: Multi-line "extra" hover label alignment is off

[etpinard]

Pulled out of @Braintelligence's https://github.com/plotly/plotly.js/issues/3175#issuecomment-448565062

or simply in https://codepen.io/etpinard/pen/QzRzBe

[etpinard]

Would something like:

look good enough?

[Braintelligence]

Maybe valign the value? :p

[etpinard]

Example of a more extreme case:

Plotly.newPlot('graph', [{
  y: [1, 2, 1],
  name: 'Multi<br>line<br>trace<br>name',
  hoverlabel: {namelength: -1},
  hoverinfo: 'x+y+name'
}, {
  y: [1, 2, 1],
  name: 'Multi<br>line<br>trace<br>name',
  hoverinfo: 'x+y+name',
  hoverlabel: {namelength: -1}
}], {
  showlegend: true
})

[etpinard]

Maybe valign the value? :p

That could work. @plotly/plotly_js any thoughts on this?

[Braintelligence]

Otherwise it looks OK! :) Thanks a bunch

[alexcjohnson]

Currently multiline primary text with a single-line name leaves the name top-aligned with the text box, which makes me think the default with more lines in the name than in the primary text should be the same, top-aligned. But an attribute to switch that to middle-aligned or bottom-aligned would be great to add at some point.

[etpinard]

makes me think the default with more lines in the name than in the primary text should be the same

Pushed to https://github.com/plotly/plotly.js/pull/3443

But an attribute to switch that to middle-aligned or bottom-aligned would be great to add at some point.

Now in https://github.com/plotly/plotly.js/issues/3010