Change Popover.Arrow and Tooltip.Arrow position according to parent position

[diegohaz]

Currently, if we pass a different pos to Tooltip or Popover, we also need to change the pos prop on the Arrow component.

<Tooltip pos="bottom">
  <Tooltip.Arrow pos="top" />
  Tooltip
</Tooltip>

That's kind of annoying. Setting pos="bottom" on Tooltip should automatically and correctly position Tooltip.Arrow.

We can't reliably set props on Arrow from Tooltip. The best option we have, I guess, is to change the styles. Something like this:

import { ifProp } from "styled-tools";
import TooltipArrow from "./TooltipArrow";

const Tooltip = styled(Base)`
  position: absolute;
  ${TooltipArrow} {
    // styles based on Tooltip pos
    ${ifProp({ pos: "bottom" }, /* apply styles for pos top */)}
  }
`;

In order to get Perpendicular styles, we should use getStyle from styled-tools:

import { ifProp, getStyle } from "styled-tools";
import TooltipArrow from "./TooltipArrow";

const Tooltip = styled(Base)`
  position: absolute;
  ${TooltipArrow} {
    ${ifProp({ pos: "bottom" }, getStyle(TooltipArrow, { pos: "top" }))};
  }
`;

[diegohaz]

Besides being too hidden magic, it'll require a lot of work and ugly code to happen (with bugs, probably). Closing for now.