feat: add generic tooltip component FadingTooltip

This component:
 - has a default fading transition for consistency in the webapp
 - lets users have newlines in the tooltips messages
 - adds a div wrapper to prevent some warnings (e.g. on disabled buttons)
 - increases tooltip max width to 600px

Author: csm-thu

src/index.js

@@ -24,6 +24,7 @@ export { UserInfo, HelpMenu } from './menus';
 export {
   ErrorBanner,
   ErrorsPanel,
+  FadingTooltip,
   FixedRatioContainer,
   LoadingLine,
   PermissionsGate,

src/misc/FadingTooltip/FadingTooltip.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Fade, Tooltip as MuiTooltip, withStyles } from '@material-ui/core';
+
+const Tooltip = ({ children, ...other }) => {
+  return (
+    <MuiTooltip TransitionComponent={Fade} TransitionProps={{ timeout: 600 }} {...other}>
+      <div>{children}</div>
+    </MuiTooltip>
+  );
+};
+
+Tooltip.propTypes = {
+  /**
+   * Elements that trigger the tooltip when hovered
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+export const FadingTooltip = withStyles((theme) => ({
+  tooltip: {
+    whiteSpace: 'pre-wrap',
+    maxWidth: '600px',
+  },
+}))(Tooltip);

src/misc/FadingTooltip/index.js

@@ -0,0 +1 @@
+export { FadingTooltip } from './FadingTooltip';

src/misc/index.js

@@ -7,4 +7,5 @@ export { ScenarioValidationStatusChip } from './ScenarioValidationStatusChip';
 export { LoadingLine } from './LoadingLine';
 export { ErrorBanner } from './ErrorBanner';
 export { DefaultAvatar } from './DefaultAvatar';
+export { FadingTooltip } from './FadingTooltip';
 export { PermissionsGate } from './PermissionsGate';