Add new overlay ui module with tooltip component

Our current tooltip component has been causing ui glitches for over a year now because it did not use react portal to render the tooltip content outside the react render tree which interfered with html/css. The new component is based on a fully accessible component by radix-ui. The styling, for now, has been kept from the original tooltip.

Committed-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>

scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx

@@ -26,7 +26,7 @@ import { FC, ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import FullscreenModal from "../modals/FullscreenModal";
-import Tooltip from "../Tooltip";
+import { Tooltip } from "@scm-manager/ui-overlays";
 
 type Props = {
   modalTitle: string;
@@ -46,34 +46,36 @@ const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody, tooltipStyle
   const [showModal, setShowModal] = useState(false);
 
   const tooltip = t("diff.fullscreen.open");
-  const content = (
-    <>
-      <Button
-        title={tooltipStyle === "htmlTitle" ? tooltip : undefined}
-        className="button"
-        onClick={() => setShowModal(true)}
-        aria-label={tooltip}
-      >
-        <i className="fas fa-search-plus" />
-      </Button>
-      {showModal && (
-        <FullscreenModal
-          title={modalTitle}
-          closeFunction={() => setShowModal(false)}
-          body={modalBody}
-          active={showModal}
-        />
-      )}
-    </>
+  const button = (
+    <Button
+      title={tooltipStyle === "htmlTitle" ? tooltip : undefined}
+      className="button"
+      onClick={() => setShowModal(true)}
+      aria-label={tooltip}
+    >
+      <i className="fas fa-search-plus" />
+    </Button>
+  );
+  const modal = showModal && (
+    <FullscreenModal title={modalTitle} closeFunction={() => setShowModal(false)} body={modalBody} active={showModal} />
   );
 
   if (tooltipStyle === "htmlTitle") {
-    return <>{content}</>;
+    return (
+      <>
+        {button}
+        {modal}
+      </>
+    );
   }
+
   return (
-    <Tooltip message={tooltip} location="bottom">
-      {content}
-    </Tooltip>
+    <>
+      {modal}
+      <Tooltip message={tooltip} side="top">
+        {button}
+      </Tooltip>
+    </>
   );
 };
 

scm-ui/ui-components/src/repos/DiffButton.tsx

@@ -23,7 +23,7 @@
  */
 import React, { FC, MouseEvent } from "react";
 import styled from "styled-components";
-import Tooltip from "../Tooltip";
+import { Tooltip } from "@scm-manager/ui-overlays";
 
 const Button = styled.button`
   width: 50px;
@@ -45,7 +45,7 @@ const DiffButton: FC<Props> = ({ icon, tooltip, onClick }) => {
   };
 
   return (
-    <Tooltip message={tooltip} location="bottom">
+    <Tooltip message={tooltip} side="top">
       <Button aria-label={tooltip} className="button is-clickable" onClick={handleClick}>
         <i className={`fas fa-${icon}`} />
       </Button>

scm-ui/ui-components/src/repos/JumpToFileButton.tsx

@@ -24,7 +24,7 @@
 import React, { FC } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import Tooltip from "../Tooltip";
+import { Tooltip } from "@scm-manager/ui-overlays";
 import Icon from "../Icon";
 
 const Button = styled(Link)`
@@ -41,7 +41,7 @@ type Props = {
 
 const JumpToFileButton: FC<Props> = ({ link, tooltip }) => {
   return (
-    <Tooltip message={tooltip} location="bottom">
+    <Tooltip message={tooltip} side="top">
       <Button aria-label={tooltip} className="button is-clickable" to={link}>
         <Icon name="file-code" color="inherit" alt="" />
       </Button>