Tooltip position is offset on cursor interaction and centered for synced tooltips

[formgeist]

Summary

When enabling tooltip synchronization on the charts, the tooltip on the active chart is positioned according to the configuration (adjacent to the vertical line), but the synced tooltips show on top of the vertical line not respecting the configuration.

The below screenshot can be reproduced on the APM Service overview page in Kibana 7.11 or master.

[cyrille-leclerc]

Thanks @formgeist . cc @alex-fedotyev

[nickofthyme]

@formgeist Thanks for opening this issue.

The external tooltip placement can be set via the externalPointerEvents.tooltip.placement prop on Settings component.

<Chart>
  <Settings
    onPointerUpdate={onPointerUpdate}
    externalPointerEvents={{
      tooltip: { placement: 'left' },
    }}
  />
</Chart>

Below notice the top tooltip placement change from left to right to bottom.

See the storybook example here.

Let me know if this solves your problem.

A current limitation of this is that the height of vertical placement is always at the top of the following chart.

[formgeist]

@nickofthyme Thanks for example and that worked! I've opened a PR to reconfigure the chart settings to set the tooltip placement differently elastic/kibana#87729

[nickofthyme]

Perfect! No problem, glad to help.