feat(app): add tooltip component [EE-2047] (#6088)

app/portainer/components/Tooltip/Tooltip.css

@@ -0,0 +1,18 @@
+.tooltip.portainer-tooltip .tooltip-inner {
+  font-family: Montserrat;
+  background-color: var(--bg-tooltip-color);
+  padding: 0.833em 1em;
+  color: var(--text-tooltip-color);
+  border: 1px solid var(--border-tooltip-color);
+  border-radius: 0.14285714rem;
+  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+}
+
+.tooltip.portainer-tooltip .tooltip-arrow {
+  display: none;
+}
+
+.fa.tooltip-icon {
+  margin-left: 5px;
+  font-size: 1.3em;
+}

app/portainer/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,19 @@
+.tooltip-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.tooltip {
+  font-family: Montserrat !important;
+  background-color: var(--bg-tooltip-color) !important;
+  padding: 0.833em 1em !important;
+  color: var(--text-tooltip-color) !important;
+  border: 1px solid var(--border-tooltip-color) !important;
+  border-radius: 0.14285714rem !important;
+  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
+}
+
+.icon {
+  margin-left: 5px;
+  font-size: 1.3em;
+}

app/portainer/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, Story } from '@storybook/react';
+
+import { Tooltip, Props } from './Tooltip';
+
+export default {
+  component: Tooltip,
+  title: 'Components/Tooltip',
+} as Meta;
+
+function Template({ message, position }: JSX.IntrinsicAttributes & Props) {
+  return (
+    <div className="col-sm-3 col-lg-2">
+      Example tooltip
+      <Tooltip message={message} position={position} />
+    </div>
+  );
+}
+
+export const Primary: Story<Props> = Template.bind({});
+Primary.args = {
+  message: 'Tooltip example',
+  position: 'bottom',
+};

app/portainer/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,31 @@
+import ReactTooltip from 'react-tooltip';
+import clsx from 'clsx';
+
+import styles from './Tooltip.module.css';
+
+type Place = 'top' | 'right' | 'bottom' | 'left';
+
+export interface Props {
+  position?: Place;
+  message: string;
+}
+
+export function Tooltip({ message, position = 'bottom' }: Props) {
+  return (
+    <span className="interactive">
+      <i
+        className={clsx('fa fa-question-circle blue-icon', styles.icon)}
+        aria-hidden="true"
+        data-tip={message}
+      />
+      <ReactTooltip
+        multiline
+        type="info"
+        place={position}
+        effect="solid"
+        className={styles.tooltip}
+        arrowColor="transparent"
+      />
+    </span>
+  );
+}

app/portainer/components/Tooltip/TooltipAngular.ts

@@ -0,0 +1,21 @@
+import { IComponentOptions } from 'angular';
+import './Tooltip.css';
+
+export const TooltipAngular: IComponentOptions = {
+  bindings: {
+    message: '@',
+    position: '@',
+  },
+  template: `<span
+    class="interactive"
+    tooltip-append-to-body="true"
+    tooltip-placement="{{$ctrl.position}}"
+    tooltip-class="portainer-tooltip"
+    uib-tooltip="{{$ctrl.message}}"
+  >
+    <i
+      class="fa fa-question-circle blue-icon tooltip-icon"
+      aria-hidden="true"
+    ></i>
+  </span>`,
+};

app/portainer/components/Tooltip/index.ts

@@ -0,0 +1,4 @@
+import { Tooltip } from './Tooltip';
+import { TooltipAngular } from './TooltipAngular';
+
+export { Tooltip, TooltipAngular };

app/portainer/components/index.js

@@ -6,7 +6,9 @@ import porAccessManagementModule from './accessManagement';
 import formComponentsModule from './form-components';
 
 import { ReactExampleAngular } from './ReactExample';
+import { TooltipAngular } from './Tooltip';
 
 export default angular
   .module('portainer.app.components', [sidebarModule, gitFormModule, porAccessManagementModule, formComponentsModule])
+  .component('portainerTooltip', TooltipAngular)
   .component('reactExample', ReactExampleAngular).name;

app/portainer/components/tooltip.js

@@ -1,17 +0,0 @@
-angular.module('portainer.app').directive('portainerTooltip', [
-  function portainerTooltip() {
-    var directive = {
-      scope: {
-        message: '@',
-        position: '@',
-        customStyle: '<?',
-      },
-      template: `
-    <span class="interactive" tooltip-append-to-body="true" tooltip-placement="{{position}}" tooltip-class="portainer-tooltip" uib-tooltip="{{message}}">
-      <i class="" ng-class="['fa fa-question-circle blue-icon', {'tooltip-icon': !customStyle}]" ng-style="customStyle" aria-hidden="true"></i>
-    </span>`,
-      restrict: 'E',
-    };
-    return directive;
-  },
-]);