feat(Tooltip): Add placement-based arrow positioning (centering)

The arrow will now always point towards the reference element while being centered with the tooltip
(no matter the size or number of lines)

Author: Greg-Hamel

src/components/Tooltip/Tooltip.react.js

@@ -42,7 +42,12 @@ class Tooltip extends React.Component<Props, State> {
       className
     );
 
-    const arrowClasses = cn("arrow", styles["tbr-arrow"]);
+    const arrowClasses = cn(
+      "arrow",
+      placement === "top" || placement === "bottom"
+        ? styles["tbr-arrow-vertical"]
+        : styles["tbr-arrow-horizontal"]
+    );
 
     return (
       <Manager>

src/components/Tooltip/tooltip.css

@@ -1,5 +1,9 @@
 /* Tooltip-specific Stylesheet */
 
-.tbr-arrow {
+.tbr-arrow-vertical {
   left: calc(50% - 0.4rem);
 }
+
+.tbr-arrow-horizontal {
+  top: calc(50% - 0.4rem);
+}