feat: Tooltip, ToolbarButton, Toolbar API and misc

platform/ui/src/components/Tooltip/Tooltip.jsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import './tooltip.css';
+
+const arrowPositionStyle = {
+  bottom: {
+    top: -15,
+    left: '50%',
+    transform: 'translateX(-50%)',
+  },
+  'bottom-left': { top: -15, left: 5 },
+  'bottom-right': { top: -15, right: 5 },
+  right: {
+    top: 'calc(50% - 8px)',
+    left: -15,
+    transform: 'rotate(270deg)',
+  },
+  left: {
+    top: 'calc(50% - 8px)',
+    right: -15,
+    transform: 'rotate(-270deg)',
+  },
+};
+
+const Tooltip = ({ position, content, tight, children }) => {
+  const [isActive, setIsActive] = useState(false);
+  return (
+    <div
+      className="relative"
+      onMouseOver={() => {
+        if (!isActive) {
+          setIsActive(true);
+        }
+      }}
+      onMouseOut={() => {
+        if (isActive) {
+          setIsActive(false);
+        }
+      }}
+    >
+      {children}
+      <div
+        className={classnames(`tooltip tooltip-${position}`, {
+          block: isActive,
+          hidden: !isActive,
+        })}
+      >
+        <div
+          className={classnames(
+            'relative tooltip-box bg-primary-dark border border-secondary-main text-white text-base rounded inset-x-auto top-full w-max-content',
+            {
+              'py-1 px-4': !tight,
+            }
+          )}
+        >
+          {content}
+          <svg
+            className="absolute text-primary-dark h-4 stroke-secondary-main"
+            style={arrowPositionStyle[position]}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path fill="currentColor" d="M24 22h-24l12-20z" />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Tooltip.defaultProps = {
+  tight: false,
+  position: 'bottom',
+};
+
+Tooltip.propTypes = {
+  tight: PropTypes.bool,
+  position: PropTypes.oneOf([
+    'bottom',
+    'bottom-left',
+    'bottom-right',
+    'left',
+    'right',
+  ]),
+  children: PropTypes.node.isRequired,
+  content: PropTypes.node.isRequired,
+};
+
+export default Tooltip;

platform/ui/src/components/Tooltip/Tooltip.mdx

@@ -0,0 +1,40 @@
+---
+name: Tooltip
+menu: Data Display
+route: components/tooltip
+---
+
+import { Playground, Props } from 'docz';
+import { Tooltip, Typography } from '@ohif/ui';
+
+# Tooltip
+
+Tooltips display informative content when users hover over, focus on, or tap an
+element.
+
+## Import
+
+```javascript
+import { Tooltip } from '@ohif/ui';
+```
+
+<Playground>
+  {() => {
+    const tooltips = ['bottom', 'bottom-left', 'bottom-right', 'left', 'right'];
+    return (
+      <div className="py-10 flex flex-col items-center justify-center">
+        {tooltips.map((tooltip) => (
+          <div className="mb-16">
+            <Tooltip content="Tooltip content" position={tooltip}>
+              <Typography>Tooltip {tooltip}</Typography>
+            </Tooltip>
+          </div>
+        ))}
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={Tooltip} />

platform/ui/src/components/Tooltip/index.js

@@ -0,0 +1,2 @@
+import Tooltip from './Tooltip';
+export default Tooltip;

platform/ui/src/components/Tooltip/tooltip.css

@@ -0,0 +1,91 @@
+.tooltip {
+  @apply z-10 absolute;
+}
+
+/* TOOLTIP WORKAROUND FOR ARROW UP */
+.tooltip.tooltip-bottom .tooltip-box::before {
+  @apply bg-primary-dark absolute z-10;
+  content: '';
+  width: 14px;
+  height: 1px;
+  top: -1px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip.tooltip-bottom {
+  @apply pt-2 mt-1;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip.tooltip-bottom-left {
+  @apply pt-2 mt-1;
+  left: 0;
+}
+
+.tooltip.tooltip-bottom-right {
+  @apply pt-2 mt-1;
+  right: 0;
+}
+
+.tooltip.tooltip-left {
+  @apply mr-4;
+  top: 50%;
+  right: calc(100%);
+  transform: translateY(-50%);
+}
+
+.tooltip.tooltip-right {
+  @apply ml-4;
+  top: 50%;
+  left: calc(100%);
+  transform: translateY(-50%);
+}
+
+.tooltip.tooltip-right .tooltip-box::before {
+  @apply bg-primary-dark absolute z-10;
+  content: '';
+  width: 2px;
+  height: 15px;
+  left: -1px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.tooltip.tooltip-left .tooltip-box::before {
+  @apply bg-primary-dark absolute z-10;
+  content: '';
+  width: 2px;
+  height: 15px;
+  right: -1px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.tooltip.tooltip-bottom-right .tooltip-box::before {
+  @apply bg-primary-dark absolute z-10;
+  content: '';
+  width: 15px;
+  height: 2px;
+  right: 5px;
+  top: -1px;
+}
+
+.tooltip.tooltip-bottom-left .tooltip-box::before {
+  @apply bg-primary-dark absolute z-10;
+  content: '';
+  width: 15px;
+  height: 2px;
+  left: 5px;
+  top: -1px;
+}
+
+/* TODO: REMOVE BELOW CLASS "showTooltipOnHover" AFTER TOOLTIP REPLACEMENT */
+.showTooltipOnHover .tooltip {
+  display: none;
+}
+
+.showTooltipOnHover:hover .tooltip {
+  display: block;
+}