feat(tooltip): support for left-right open expanded tooltip

[boilund]

[Tigge]

You can calculate whether if the tooltips fits with this:

    const bounds = anchorEl.getBoundingClientRect()
    const tooltipSize: [number, number] = [
      tooltipEl.clientWidth + 8,
      tooltipEl.clientHeight + 8,
    ]
    const tooltipMid = [
      bounds.left + (bounds.right - bounds.left) / 2,
      bounds.top + (bounds.bottom - bounds.top) / 2,
    ]

    const spaces: Record<Placement, boolean> = {
      down: rectInBounds(
        [tooltipMid[0] - tooltipSize[0] / 2, bounds.bottom],
        tooltipSize
      ),
      up: rectInBounds(
        [tooltipMid[0] - tooltipSize[0] / 2, bounds.top - tooltipSize[1]],
        tooltipSize
      ),
      left: rectInBounds(
        [bounds.left - tooltipSize[0], tooltipMid[1] - tooltipSize[1] / 2],
        tooltipSize
      ),
      right: rectInBounds(
        [bounds.right, tooltipMid[1] - tooltipSize[1] / 2],
        tooltipSize
      ),
    }

And then have fallbacks for each placement:

    if (placement === 'up-down') {
      if (spaces.up || spaces.down) {
        setLayout(spaces.up ? 'up' : 'down')
      } else {
        setLayout(spaces.right ? 'right' : 'left')
      }
    } else if (placement === 'left-right') {
      if (spaces.right || spaces.left) {
        setLayout(spaces.right ? 'right' : 'left')
      } else {
        setLayout(spaces.up ? 'up' : 'down')
      }
    }