revamp TooltipPositioner for easier adoption

[ShadyStego]

Originally this was supposed to be a migration of this change, but decided to make more changes for easier adoption. Given this change, clients can control the tooltip positions using css if preferred. The attributes will still be passed to the tooltipContent function if client manipulation is still desired.

Will update the doc with the corresponding "starter" CSS to achieve the behavior above, as well as applying the same changes to 1.0.

[emeeks]

Love it! Some of the tests are failing, partly because of CircleCI needing more memory and partly because of types, but I can fix those.

[MichielDeMey]

Hey @ShadyStego, would you mind adding the CSS boilerplate to get this working? 🙂

EDIT: For those stumbling upon this feature, I used the following CSS to position the tooltip based on the collision flags:

.tooltip-container.collision-right {
  transform: translateX(-100%);
}

.tooltip-container.collision-bottom {
  transform: translateY(-100%);
}

[ShadyStego]

@MichielDeMey thanks for the reminder. Here's the css I used:

.tooltip-collision-evaluated {
  transform-origin: 0% 0%;
  transform: translate(-50%, calc(-100%));
}

.tooltip-collision-evaluated.collision-right {
  transform: translate(calc(-100% - 10px), -50%);
}

.tooltip-collision-evaluated.collision-top {
  transform: translate(-50%, 10px);
}

.tooltip-collision-evaluated.collision-top.collision-right {
  transform: translate(calc(-100% - 10px), 0%);
}

.tooltip-collision-evaluated.collision-left {
  transform: translate(10px, -50%);
}

.tooltip-collision-evaluated.collision-left.collision-top {
  transform: translate(10px, 0%);
}

Let me know if that works.

Note: I was planning to enhance this to also support the arrow/ pointer that can be positioned dynamically (i.e. not just in the middle). I then stumbled into React Popper, and now I'm planning to investigate whether that library can make it work (as well as replace the code I added for collision detection). I might look into it this quarter.