feat(Tooltip): Add arrow to the tooltip

The arrow will now always be shown pointing downwards. Next commit will allow for a placement-based
alignment of the arrow.

Author: Greg-Hamel

src/components/Tooltip/Tooltip.react.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import cn from "classnames";
 import { Manager, Placement, Reference, Popper } from "react-popper";
 import type { PopperChildrenProps, ReferenceChildrenProps } from "react-popper";
+import styles from "./tooltip.css";
 
 type Props = {|
   +content: string,
@@ -41,6 +42,8 @@ class Tooltip extends React.Component<Props, State> {
       className
     );
 
+    const arrowClasses = cn("arrow", styles["tbr-arrow"]);
+
     return (
       <Manager>
         <Reference>
@@ -64,7 +67,7 @@ class Tooltip extends React.Component<Props, State> {
                   style={style}
                   ref={ref}
                 >
-                  {/* <div className="arrow tbr-arrow" /> */}
+                  <div className={arrowClasses} />
                   <div className="tooltip-inner">{content}</div>
                 </div>
               );

src/components/Tooltip/tooltip.css

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