Added Tooltip Component

packages/fuselage/src/components/Tooltip/index.js

+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { Box } from '../Box';
+
+const Container = Box.extend('rcx-tooltip', 'div');
+
+export function Tooltip({
+  left,
+  right,
+  center,
+  pointUp,
+  pointDown,
+  pointLeft,
+  pointRight,
+  ...props
+}) {
+  return <Container
+    mod-dir-right={ !!pointRight }
+    mod-dir-left={ !!pointLeft }
+    mod-dir-up={ !!pointUp }
+    mod-dir-down={ !!pointDown }
+    mod-pos-left={ !!left }
+    mod-pos-right={ !!right }
+    mod-pos-center={ !left && !right && !pointLeft && !pointRight }
+    {...props} />;
+}
+
+Tooltip.propTypes = {
+  left: PropTypes.bool,
+  right: PropTypes.bool,
+};

packages/fuselage/src/components/Tooltip/spec.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Tooltip } from '../..';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Tooltip />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

packages/fuselage/src/components/Tooltip/stories.mdx

+import { action } from '@storybook/addon-actions';
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+import { PropsVariationSection } from '../../../.storybook/helpers';
+
+import { Tooltip } from '../..';
+
+<Meta title='Tooltip|Tooltips' parameters={{ jest: ['Tooltip/spec'] }} />
+
+# Tooltip
+
+Describes component/button details.
+
+### Pointing Up
+
+<Preview>
+  <Story name='Pointing Up'>
+    <PropsVariationSection
+      component={Tooltip}
+      common={{ pointUp:true, onClick: action('click') }}
+      xAxis={{
+        'arrow to left': { left: true, children: "Description" },
+        'arrow to middle': { children: "Description" },
+        'arrow to right': { right:true, children: "Description" },
+      }}
+      yAxis={{
+        default: {},
+      }}
+    />
+  </Story>
+</Preview>
+
+### Pointing Down
+
+<Preview>
+  <Story name='Pointing Down'>
+    <PropsVariationSection
+      component={Tooltip}
+      common={{ pointDown:true, onClick: action('click') }}
+      xAxis={{
+        'arrow to left': { left: true, children: "Description" },
+        'arrow to middle': { children: "Description" },
+        'arrow to right': { right:true, children: "Description" },
+      }}
+      yAxis={{
+        default: {},
+      }}
+    />
+  </Story>
+</Preview>
+
+### Pointing left
+
+<Preview>
+  <Story name='Tooltip arrow left'>
+    <Tooltip pointLeft>Description</Tooltip>
+  </Story>
+</Preview>
+
+### Pointing right
+
+<Preview>
+  <Story name='Tooltip arrow right'>
+    <Tooltip pointRight>Description</Tooltip>
+  </Story>
+</Preview>
\ No newline at end of file

packages/fuselage/src/components/Tooltip/styles.scss

+@mixin trianglePosition ($direction) {
+  &::after {
+    @include triangle($direction);
+  }
+}
+
+@mixin triangle ($direction) {
+  position: absolute;
+
+  box-sizing: border-box;
+
+  content: ' ';
+
+  border-width: calc(#{ $borders-width-x4 } + #{ $borders-width-x1 });
+  border-color: transparent transparent $tooltip-background-color $tooltip-background-color;
+  border-radius: 0 0 0 calc(#{ $borders-radius-x2 } + #{ $borders-radius-x2} / 2);
+
+  @if $direction == 'up' {
+    top: calc(-1 * (#{$spaces-x4} ));
+
+    transform: rotate(135deg);
+  }
+  @if $direction == 'down' {
+    bottom: calc(-1 * (#{$spaces-x4} ));
+
+    transform: rotate(-45deg);
+  }
+  @if $direction == 'left' {
+    top: $tooltip-arrow-position-center;
+    left: calc(-1 * (#{$spaces-x4} ));
+
+    margin-block-start: calc(-1 * #{ $spaces-x4 });
+
+    transform: rotate(45deg);
+  }
+  @if $direction == 'right' {
+    top: $tooltip-arrow-position-center;
+    right: calc(-1 * (#{$spaces-x4} ));
+
+    margin-block-start: calc(-1 * #{ $spaces-x4 });
+
+    transform: rotate(-135deg);
+  }
+}
+
+.rcx-tooltip {
+  position: relative;
+
+  display: inline-block;
+
+  padding-block: $spaces-x8;
+  padding-inline: $spaces-x12;
+
+  color: $tooltip-text-color;
+
+  border-radius: $borders-radius-x4;
+
+  background-color: $tooltip-background-color;
+
+  @include use-text-style(p2);
+
+  &--pos-left {
+    &::after {
+      left: $tooltip-arrow-margin;
+    }
+  }
+
+  &--pos-right {
+    &::after {
+      right: $tooltip-arrow-margin;
+    }
+  }
+
+  &--pos-center {
+    &::after {
+      left: 50%;
+
+      margin-inline-start: calc(-1 * #{ $spaces-x4 });
+    }
+  }
+
+  &--dir-up {
+    @include trianglePosition('up');
+  }
+
+  &--dir-down {
+    @include trianglePosition('down');
+  }
+
+  &--dir-left {
+    @include trianglePosition('left');
+  }
+
+  &--dir-right {
+    @include trianglePosition('right');
+  }
+}

packages/fuselage/src/components/index.js

@@ -36,3 +36,4 @@ export * from './Chip';
 export * from './AutoComplete';
 export * from './Options';
 export * from './Select';
+export * from './Tooltip';

packages/fuselage/src/components/index.scss

@@ -28,3 +28,4 @@
 @import './AutoComplete/styles.scss';
 @import './Options/styles.scss';
 @import './Select/styles.scss';
+@import './Tooltip/styles.scss';

packages/fuselage/src/styles/variables/all.scss

@@ -7,3 +7,4 @@
 @import './text-colors.scss';
 @import './text-styles.scss';
 @import './transitions.scss';
+@import './tooltip.scss';

packages/fuselage/src/styles/variables/borders.scss

@@ -5,6 +5,7 @@ $borders-width-x4: theme('borders-width-x4', to-rem(4));
 
 $borders-radius-none: 0;
 $borders-radius-x2: theme('borders-radius-x2', to-rem(2));
+$borders-radius-x4: theme('borders-radius-x4', to-rem(4));
 $borders-radius-full: 9999px;
 
 $borders: (

packages/fuselage/src/styles/variables/tooltip.scss

+$tooltip-arrow-margin: $spaces-x8;
+$tooltip-arrow-position-center: 50%;
+
+$tooltip-background-color: theme('tooltip-background-color', $colors-n900);
+$tooltip-text-color: theme('tooltip-text-color', $colors-white);