Dynamic tooltip react popper

[ShadyStego]

I've evaluated Popper.js and React-Popper (docs), and they seem to be a solid library to use to support dynamic tooltips. It supports optimized arrow placement too. In the future we can open up a few of their settings if make sense.

This will be a breaking change to the previous version that I implemented from scratch. Let me know if we need to be backward compatible.

Here is the suggested CSS (very similar to their tutorials, with a few tweaks and comments to support borders):

/* 
The CSS mostly follows the popper.js docs: https://popper.js.org/docs/v2/tutorial/ , 
but with a few modifications to support borders.
If borders are used, don't define any padding otherwise the arrow's diamond will be visible. 
Use your tooltip content container to control the padding instead. 
*/
.tooltip {
  border: 1px solid black;
  border-radius: 4px;
  box-sizing: border-box;
}

/* The class of your tooltip content (you need to add it to the HTML element yourself). */
.tooltip-content {
  width: 150px;
  height: 200px;
  background: lightgrey;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 4px;
}

.tooltip-arrow, .tooltip-arrow::before {
  position: absolute;
  width: 16px; /*set the dimensions of the arrow div*/
  height: 16px; /*set the dimensions of the arrow div*/
  z-index: -1;
  box-sizing: border-box;
}

.tooltip-arrow::before {
  content: '';
  transform: rotate(45deg);
  background: lightgrey; /* This should match with the tooltip content */
  border: 1px solid black;
}

.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
  bottom: -8px; /*half the length of the arrow div*/
}

.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
  top: -8px;
}

.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
  right: -8px;
}

#tooltip[data-popper-placement^='right'] > .tooltip-arrow {
  left: -8px;
}

(cc @emeeks , @MichielDeMey)

[captainsafia]

@ShadyStego Thanks for the PR! Heads up: looks like you had a bad merge somewhere and the diff is now huge.

[ShadyStego]

Thanks, @captainsafia . I think I tried to merge it to the wrong branch (master). I intended to merge with semiotic-2. Let me take a look.

[ShadyStego]

I've updated the target to the right branch. The test failed though, possibly typescript related.

[MichielDeMey]

Odd, seems to be trying to fetch dependencies from npm.apple.com registry, which is probably not exposed to the outside. 😅

[captainsafia]

@emeeks Might have thoughts on this.