Merge pull request #740 from dennis531/tooltip-covering

Hide tooltip on hover
opencast · Jun 25, 2024 · e77eb04 · e77eb04
2 parents c72f315 + 39fb037
commit e77eb04
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 21 deletions.
diff --git a/src/components/shared/MainNav.tsx b/src/components/shared/MainNav.tsx
@@ -241,14 +241,14 @@ const MainNav = ({
 							{hasAccess("ROLE_UI_NAV_RECORDINGS_VIEW", user) &&
 								(hasAccess("ROLE_UI_EVENTS_VIEW", user) ? (
 									<Link to="/events/events" onClick={() => loadEvents()}>
-										<Tooltip title={t("NAV.EVENTS.TITLE")}>
+										<Tooltip title={t("NAV.EVENTS.TITLE")} placement={"right"}>
 											<i className="events" />
 										</Tooltip>
 									</Link>
 								) : (
 									hasAccess("ROLE_UI_SERIES_VIEW", user) && (
 										<Link to="/events/series" onClick={() => loadSeries()}>
-											<Tooltip title={t("NAV.EVENTS.TITLE")}>
+											<Tooltip title={t("NAV.EVENTS.TITLE")} placement={"right"}>
 												<i className="events" />
 											</Tooltip>
 										</Link>
@@ -260,7 +260,7 @@ const MainNav = ({
 										to="/recordings/recordings"
 										onClick={() => loadRecordings()}
 									>
-										<Tooltip title={t("NAV.CAPTUREAGENTS.TITLE")}>
+										<Tooltip title={t("NAV.CAPTUREAGENTS.TITLE")} placement={"right"}>
 											<i
 												className="recordings"
 											/>
@@ -270,20 +270,20 @@ const MainNav = ({
 							{hasAccess("ROLE_UI_NAV_SYSTEMS_VIEW", user) &&
 								(hasAccess("ROLE_UI_JOBS_VIEW", user) ? (
 									<Link to="/systems/jobs" onClick={() => loadJobs()}>
-										<Tooltip  title={t("NAV.SYSTEMS.TITLE")}>
+										<Tooltip  title={t("NAV.SYSTEMS.TITLE")} placement={"right"}>
 											<i className="systems" />
 										</Tooltip>
 									</Link>
 								) : hasAccess("ROLE_UI_SERVERS_VIEW", user) ? (
 									<Link to="/systems/servers" onClick={() => loadServers()}>
-										<Tooltip title={t("NAV.SYSTEMS.TITLE")}>
+										<Tooltip title={t("NAV.SYSTEMS.TITLE")} placement={"right"}>
 											<i className="systems" />
 										</Tooltip>
 									</Link>
 								) : (
 									hasAccess("ROLE_UI_SERVICES_VIEW", user) && (
 										<Link to="/systems/services" onClick={() => loadServices()}>
-											<Tooltip title={t("NAV.SYSTEMS.TITLE")}>
+											<Tooltip title={t("NAV.SYSTEMS.TITLE")} placement={"right"}>
 												<i className="systems" />
 											</Tooltip>
 										</Link>
@@ -292,20 +292,20 @@ const MainNav = ({
 							{hasAccess("ROLE_UI_NAV_ORGANIZATION_VIEW", user) &&
 								(hasAccess("ROLE_UI_USERS_VIEW", user) ? (
 									<Link to="/users/users" onClick={() => loadUsers()}>
-										<Tooltip title={t("NAV.USERS.TITLE")}>
+										<Tooltip title={t("NAV.USERS.TITLE")} placement={"right"}>
 											<i className="users" />
 										</Tooltip>
 									</Link>
 								) : hasAccess("ROLE_UI_GROUPS_VIEW", user) ? (
 									<Link to="/users/groups" onClick={() => loadGroups()}>
-										<Tooltip title={t("NAV.USERS.TITLE")}>
+										<Tooltip title={t("NAV.USERS.TITLE")} placement={"right"}>
 											<i className="users" />
 										</Tooltip>
 									</Link>
 								) : (
 									hasAccess("ROLE_UI_ACLS_VIEW", user) && (
 										<Link to="/users/acls" onClick={() => loadAcls()}>
-											<Tooltip title={t("NAV.USERS.TITLE")}>
+											<Tooltip title={t("NAV.USERS.TITLE")} placement={"right"}>
 												<i className="users" />
 											</Tooltip>
 										</Link>
@@ -315,7 +315,7 @@ const MainNav = ({
 								hasAccess("ROLE_UI_NAV_CONFIGURATION_VIEW", user) &&
 								hasAccess("ROLE_UI_THEMES_VIEW", user) && (
 									<Link to="/configuration/themes" onClick={() => loadThemes()}>
-										<Tooltip title={t("NAV.CONFIGURATION.TITLE")}>
+										<Tooltip title={t("NAV.CONFIGURATION.TITLE")} placement={"right"}>
 											<i className="configuration" />
 										</Tooltip>
 									</Link>
@@ -324,7 +324,7 @@ const MainNav = ({
 								hasAccess("ROLE_UI_NAV_STATISTICS_VIEW", user) &&
 								hasAccess("ROLE_UI_STATISTICS_ORGANIZATION_VIEW", user) && (
 									<Link to="/statistics/organization">
-										<Tooltip title={t("NAV.STATISTICS.TITLE")}>
+										<Tooltip title={t("NAV.STATISTICS.TITLE")} placement={"right"}>
 											<i className="statistics" />
 										</Tooltip>
 									</Link>

diff --git a/src/components/shared/Tooltip.tsx b/src/components/shared/Tooltip.tsx
@@ -1,10 +1,45 @@
 import { useRef } from "react";
 import MuiTooltip, { TooltipProps } from "@mui/material/Tooltip";
 
-export const Tooltip = ({ className, ...props }: TooltipProps) => {
+export const Tooltip = ({ className, placement="top", ...props }: TooltipProps) => {
 	const positionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
 	const areaRef = useRef<HTMLDivElement>(null);
 
+	const getBoundingClientRect = () => {
+		 switch (placement) {
+			 case "top":
+					return new DOMRect(
+						positionRef.current.x,
+						areaRef.current?.getBoundingClientRect().y,
+						0,
+						positionRef.current.y,
+					);
+			 case "right":
+				 return new DOMRect(
+					 areaRef.current?.getBoundingClientRect().x,
+					 positionRef.current.y,
+					 areaRef.current?.getBoundingClientRect().width,
+					 0,
+				 );
+			 case "bottom":
+				 return new DOMRect(
+					 positionRef.current.x,
+					 areaRef.current?.getBoundingClientRect().y,
+					 0,
+					 areaRef.current?.getBoundingClientRect().height,
+				 );
+			 case "left":
+				 return new DOMRect(
+					 areaRef.current?.getBoundingClientRect().x,
+					 positionRef.current.y,
+					 areaRef.current?.getBoundingClientRect().width,
+					 0,
+				 );
+			 default:
+				 return areaRef.current?.getBoundingClientRect()!;
+		}
+	};
+
 	return (
 		<MuiTooltip
 			{...props}
@@ -14,20 +49,13 @@ export const Tooltip = ({ className, ...props }: TooltipProps) => {
 			enterDelay={100}
 			enterNextDelay={100}
 			leaveDelay={150}
-			placement="top"
+			placement={placement}
 			ref={areaRef}
 			onMouseOut={() => (positionRef.current = { x: -9999, y: -9999 })}
 			onMouseMove={(event) => (positionRef.current = { x: event.clientX, y: event.clientY })}
 			PopperProps={{
 				anchorEl: {
-					getBoundingClientRect: () => {
-						return new DOMRect(
-							positionRef.current.x,
-							areaRef.current?.getBoundingClientRect().y,
-							0,
-							positionRef.current.y,
-						);
-					},
+					getBoundingClientRect,
 				},
 			}}
 		/>