UX: positioning is off, arrow does not point to the target

[sammuell]

Description

This is a mobile-friendliness issue. On small screens the tooltip is overlapping the edge of the screen. The pointing arrow is completely off because it is positioned in the middle.

Expected Behavior

The tooltip should always completely stay within the viewport. The arrow should actually point at the target.

Actual Behavior, Errors and Screenshots

The arrow does not point at the target. The tooltip is offset to the right. There is already another issue about the tooltip offset: #1701

The tooltip overflows the viewport and the arrow is off as well

Example

The screenshots above have been made using this fiddle by modifying the width of the preview pane.
https://jsfiddle.net/bcauqyeL/

Possible solution

Completely reimplement the positioning of the tooltip and arrow.
Instead of having the arrow static at three possible positions (left/center/right or top/center/bottom) and position the tooltip accoringly, rather first determine the best position of the tooltip and then calculate the offset of the arrow (basically allow the arrow to be positioned anywhere along the edge of the tooltip).

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.