From 7214f061add745ad85d3dba2e511533ef767eef6 Mon Sep 17 00:00:00 2001
From: Marcus <github@luniki.de>
Date: Wed, 5 Jun 2024 09:39:50 +0200
Subject: [PATCH] Use @mui/material's Tooltip instead of `title` attributes.

Fixes https://github.com/opencast/opencast-admin-interface/issues/574
---
 src/components/Header.tsx                     | 120 ++++++++++--------
 .../partials/ThemesActionsCell.tsx            |  23 ++--
 .../events/partials/EventActionCell.tsx       | 104 ++++++++-------
 .../events/partials/EventsDateCell.tsx        |  16 ++-
 .../events/partials/EventsLocationCell.tsx    |  16 ++-
 .../events/partials/EventsPresentersCell.tsx  |  17 +--
 .../events/partials/EventsSeriesCell.tsx      |  16 ++-
 .../events/partials/EventsStatusCell.tsx      |  16 ++-
 .../partials/EventsTechnicalDateCell.tsx      |  16 ++-
 .../EventDetailsWorkflowTab.tsx               |  79 ++++++------
 .../events/partials/SeriesActionsCell.tsx     |  25 ++--
 .../events/partials/SeriesTitleCell.tsx       |  18 +--
 .../partials/RecordingsActionCell.tsx         |  23 ++--
 .../partials/RecordingsNameCell.tsx           |  18 +--
 src/components/shared/MainNav.tsx             | 106 +++++++++-------
 src/components/shared/Stats.tsx               |  38 +++---
 src/components/shared/TableFilterProfiles.tsx |  38 +++---
 src/components/shared/TableFilters.tsx        |  49 +++----
 src/components/shared/Tooltip.tsx             |  35 +++++
 .../systems/partials/ServicesActionsCell.tsx  |  12 +-
 .../users/partials/AclsActionsCell.tsx        |  23 ++--
 .../users/partials/GroupsActionsCell.tsx      |  23 ++--
 .../users/partials/UsersActionsCell.tsx       |  23 ++--
 .../users/partials/wizard/NewUserWizard.tsx   |  16 ++-
 src/styles/components/_components-config.scss |   1 +
 src/styles/components/_tooltips.scss          |   5 +
 26 files changed, 502 insertions(+), 374 deletions(-)
 create mode 100644 src/components/shared/Tooltip.tsx
 create mode 100644 src/styles/components/_tooltips.scss

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 09c3b2f17a..314d211a3c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -22,6 +22,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { useAppDispatch, useAppSelector } from "../store";
 import { HealthStatus, fetchHealthStatus } from "../slices/healthSlice";
 import { UserInfoState } from "../slices/userInfoSlice";
+import { Tooltip } from "./shared/Tooltip";
 
 // Get code, flag and name of the current language
 const currentLanguage = getCurrentLanguageInformation();
@@ -161,13 +162,14 @@ const Header = ({
 				<nav className="header-nav nav-dd-container" id="nav-dd-container">
 					{/* Select language */}
 					<div className="nav-dd lang-dd" id="lang-dd" ref={containerLang}>
+						<Tooltip title={t("LANGUAGE")}>
 						<div
 							className="lang"
-							title={t("LANGUAGE")}
 							onClick={() => setMenuLang(!displayMenuLang)}
 						>
 							<img src={currentLanguage?.flag} alt={currentLanguage?.code} />
 						</div>
+						</Tooltip>
 						{/* Click on the flag icon, a dropdown menu with all available languages opens */}
 						{displayMenuLang && <MenuLang />}
 					</div>
@@ -178,51 +180,56 @@ const Header = ({
                     otherwise the app crashes */}
 					{!!orgProperties &&
 						!!orgProperties["org.opencastproject.admin.mediamodule.url"] && (
-							<div className="nav-dd" title={t("MEDIAMODULE")}>
-								<a
-									href={
-										orgProperties["org.opencastproject.admin.mediamodule.url"]
-									}
-									target="_blank" rel="noreferrer"
-								>
-									<span className="fa fa-play-circle" />
-								</a>
-							</div>
+							<Tooltip  title={t("MEDIAMODULE")}>
+								<div className="nav-dd">
+									<a
+										href={
+											orgProperties["org.opencastproject.admin.mediamodule.url"]
+										}
+										target="_blank" rel="noreferrer"
+									>
+										<span className="fa fa-play-circle" />
+									</a>
+								</div>
+							</Tooltip>
 						)}
 
 					{/* Opencast Studio */}
 					{hasAccess("ROLE_STUDIO", user) && (
-						<div className="nav-dd" title="Studio">
-							<a href={studioURL} target="_blank" rel="noreferrer">
-								<span className="fa fa-video-camera" />
-							</a>
-						</div>
+						<Tooltip  title="Studio">
+							<div className="nav-dd">
+								<a href={studioURL} target="_blank" rel="noreferrer">
+									<span className="fa fa-video-camera" />
+								</a>
+							</div>
+						</Tooltip>
 					)}
 
 					{/* System warnings and notifications */}
 					{hasAccess("ROLE_ADMIN", user) && (
-						<div
-							className="nav-dd info-dd"
-							id="info-dd"
-							title={t("SYSTEM_NOTIFICATIONS")}
-							ref={containerNotify}
-						>
-							<div onClick={() => setMenuNotify(!displayMenuNotify)}>
-								<i className="fa fa-bell" aria-hidden="true" />
-								{errorCounter !== 0 && (
-									<span id="error-count" className="badge">
-										{errorCounter}
-									</span>
-								)}
-								{/* Click on the bell icon, a dropdown menu with all services in serviceList and their status opens */}
-								{displayMenuNotify && (
-									<MenuNotify
-										healthStatus={healthStatus}
-										redirectToServices={redirectToServices}
-									/>
-								)}
+						<Tooltip title={t("SYSTEM_NOTIFICATIONS")}>
+							<div
+								className="nav-dd info-dd"
+								id="info-dd"
+								ref={containerNotify}
+							>
+								<div onClick={() => setMenuNotify(!displayMenuNotify)}>
+									<i className="fa fa-bell" aria-hidden="true" />
+									{errorCounter !== 0 && (
+										<span id="error-count" className="badge">
+											{errorCounter}
+										</span>
+									)}
+									{/* Click on the bell icon, a dropdown menu with all services in serviceList and their status opens */}
+									{displayMenuNotify && (
+										<MenuNotify
+											healthStatus={healthStatus}
+											redirectToServices={redirectToServices}
+										/>
+									)}
+								</div>
 							</div>
-						</div>
+						</Tooltip>
 					)}
 
 					{/* Help */}
@@ -236,27 +243,28 @@ const Header = ({
 							!!orgProperties[
 								"org.opencastproject.admin.help.restdocs.url"
 							]) && (
-							<div
-								title="Help"
-								className="nav-dd"
-								id="help-dd"
-								ref={containerHelp}
-							>
+							<Tooltip title="Help">
 								<div
-									className="fa fa-question-circle"
-									onClick={() => setMenuHelp(!displayMenuHelp)}
-								/>
-								{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
-								{displayMenuHelp && (
-									<MenuHelp
-										hideMenuHelp={hideMenuHelp}
-										showRegistrationModal={showRegistrationModal}
-										showHotKeyCheatSheet={showHotKeyCheatSheet}
-										orgProperties={orgProperties}
-										user={user}
+									className="nav-dd"
+									id="help-dd"
+									ref={containerHelp}
+								>
+									<div
+										className="fa fa-question-circle"
+										onClick={() => setMenuHelp(!displayMenuHelp)}
 									/>
-								)}
-							</div>
+									{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
+									{displayMenuHelp && (
+										<MenuHelp
+											hideMenuHelp={hideMenuHelp}
+											showRegistrationModal={showRegistrationModal}
+											showHotKeyCheatSheet={showHotKeyCheatSheet}
+											orgProperties={orgProperties}
+											user={user}
+										/>
+									)}
+								</div>
+							</Tooltip>
 						)}
 
 					{/* Username */}
diff --git a/src/components/configuration/partials/ThemesActionsCell.tsx b/src/components/configuration/partials/ThemesActionsCell.tsx
index f0e074735b..e42bc9705a 100644
--- a/src/components/configuration/partials/ThemesActionsCell.tsx
+++ b/src/components/configuration/partials/ThemesActionsCell.tsx
@@ -10,6 +10,7 @@ import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { deleteTheme } from "../../../slices/themeSlice";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the action cells of themes in the table view
@@ -49,11 +50,12 @@ const ThemesActionsCell = ({
 		<>
 			{/* edit themes */}
 			{hasAccess("ROLE_UI_THEMES_EDIT", user) && (
-				<button
-					onClick={() => showThemeDetails()}
-					className="button-like-anchor more"
-					title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS")}
-				/>
+				<Tooltip title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS")}>
+					<button
+						onClick={() => showThemeDetails()}
+						className="button-like-anchor more"
+					/>
+				</Tooltip>
 			)}
 
 			{displayThemeDetails && (
@@ -66,11 +68,12 @@ const ThemesActionsCell = ({
 
 			{/* delete themes */}
 			{hasAccess("ROLE_UI_THEMES_DELETE", user) && (
-				<button
-					onClick={() => setDeleteConfirmation(true)}
-					className="button-like-anchor remove ng-scope ng-isolate-scope"
-					title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE")}
-				/>
+				<Tooltip title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE")}>
+					<button
+						onClick={() => setDeleteConfirmation(true)}
+						className="button-like-anchor remove ng-scope ng-isolate-scope"
+					/>
+				</Tooltip>
 			)}
 
 			{displayDeleteConfirmation && (
diff --git a/src/components/events/partials/EventActionCell.tsx b/src/components/events/partials/EventActionCell.tsx
index aef879edce..e828f1676e 100644
--- a/src/components/events/partials/EventActionCell.tsx
+++ b/src/components/events/partials/EventActionCell.tsx
@@ -16,6 +16,7 @@ import {
 	fetchSeriesDetailsTheme,
 } from "../../../slices/seriesDetailsSlice";
 import { deleteEvent } from "../../../slices/eventSlice";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the action cells of events in the table view
@@ -119,30 +120,33 @@ const EventActionCell = ({
 
 			{/* Open event details */}
 			{hasAccess("ROLE_UI_EVENTS_DETAILS_VIEW", user) && (
-				<button
-					onClick={() => onClickEventDetails()}
-					className="button-like-anchor more"
-					title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS")}
-				/>
+				<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS")}>
+					<button
+						onClick={() => onClickEventDetails()}
+						className="button-like-anchor more"
+					/>
+				</Tooltip>
 			)}
 
 			{/* If event belongs to a series then the corresponding series details can be opened */}
 			{!!row.series && hasAccess("ROLE_UI_SERIES_DETAILS_VIEW", user) && (
-				<button
-					onClick={() => onClickSeriesDetails()}
-					className="button-like-anchor more-series"
-					title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}
-				/>
+				<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}>
+					<button
+						onClick={() => onClickSeriesDetails()}
+						className="button-like-anchor more-series"
+					/>
+				</Tooltip>
 			)}
 
 			{/* Delete an event */}
 			{/*TODO: needs to be checked if event is published */}
 			{hasAccess("ROLE_UI_EVENTS_DELETE", user) && (
-				<button
-					onClick={() => setDeleteConfirmation(true)}
-					className="button-like-anchor remove"
-					title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DELETE")}
-				/>
+				<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DELETE")}>
+					<button
+						onClick={() => setDeleteConfirmation(true)}
+						className="button-like-anchor remove"
+					/>
+				</Tooltip>
 			)}
 
 			{/* Confirmation for deleting an event*/}
@@ -158,64 +162,72 @@ const EventActionCell = ({
 
 			{/* If the event has an preview then the editor can be opened and status if it needs to be cut is shown */}
 			{!!row.has_preview && hasAccess("ROLE_UI_EVENTS_EDITOR_VIEW", user) && (
-				<a
-					href={`/editor-ui/index.html?id=${row.id}`}
-					className="cut"
+				<Tooltip
 					title={
 						row.needs_cutting
 							? t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR_NEEDS_CUTTING")
 							: t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR")
 					}
-					target="_blank" rel="noreferrer"
 				>
-					{row.needs_cutting && <span id="badge" className="badge" />}
-				</a>
+					<a
+						href={`/editor-ui/index.html?id=${row.id}`}
+						className="cut"
+						target="_blank" rel="noreferrer"
+					>
+						{row.needs_cutting && <span id="badge" className="badge" />}
+					</a>
+				</Tooltip>
 			)}
 
 			{/* If the event has comments and no open comments then the comment tab of event details can be opened directly */}
 			{row.has_comments && !row.has_open_comments && (
-				<button
-					onClick={() => onClickComments()}
-					title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}
-					className="button-like-anchor comments"
-				/>
+				<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}>
+					<button
+						onClick={() => onClickComments()}
+						className="button-like-anchor comments"
+					/>
+				</Tooltip>
 			)}
 
 			{/* If the event has comments and open comments then the comment tab of event details can be opened directly */}
 			{row.has_comments && row.has_open_comments && (
-				<button
-					onClick={() => onClickComments()}
-					title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}
-					className="button-like-anchor comments-open"
-				/>
+				<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}>
+					<button
+						onClick={() => onClickComments()}
+						className="button-like-anchor comments-open"
+					/>
+				</Tooltip>
 			)}
 
 			{/*If the event is in in a paused workflow state then a warning icon is shown and workflow tab of event
                 details can be opened directly */}
 			{row.workflow_state === "PAUSED" &&
 				hasAccess("ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT", user) && (
-					<button
-						title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW")}
-						onClick={() => onClickWorkflow()}
-						className="button-like-anchor fa fa-warning"
-					/>
+					<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW")}>
+						<button
+							onClick={() => onClickWorkflow()}
+							className="button-like-anchor fa fa-warning"
+						/>
+					</Tooltip>
 				)}
 
 			{/* Open assets tab of event details directly*/}
 			{hasAccess("ROLE_UI_EVENTS_DETAILS_ASSETS_VIEW", user) && (
-				<button
-					onClick={() => onClickAssets()}
-					title={t("EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS")}
-					className="button-like-anchor fa fa-folder-open"
-				/>
+				<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS")}>
+					<button
+						onClick={() => onClickAssets()}
+						className="button-like-anchor fa fa-folder-open"
+					/>
+				</Tooltip>
 			)}
 			{/* Open dialog for embedded code*/}
 			{hasAccess("ROLE_UI_EVENTS_EMBEDDING_CODE_VIEW", user) && (
-				<button
-					onClick={() => showEmbeddingCodeModal()}
-					title={t("EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE")}
-					className="button-like-anchor fa fa-link"
-				/>
+				<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE")}>
+					<button
+						onClick={() => showEmbeddingCodeModal()}
+						className="button-like-anchor fa fa-link"
+					/>
+				</Tooltip>
 			)}
 
 			{displayEmbeddingCodeModal && (
diff --git a/src/components/events/partials/EventsDateCell.tsx b/src/components/events/partials/EventsDateCell.tsx
index 76d6c5ef9b..0dafd820d2 100644
--- a/src/components/events/partials/EventsDateCell.tsx
+++ b/src/components/events/partials/EventsDateCell.tsx
@@ -7,6 +7,7 @@ import { connect } from "react-redux";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
 import { renderValidDate } from "../../../utils/dateUtils";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the start date cells of events in the table view
@@ -35,13 +36,14 @@ const EventsDateCell = ({
 
 	return (
 		// Link template for start date of event
-		<button
-			className="button-like-anchor crosslink"
-			title={t("EVENTS.EVENTS.TABLE.TOOLTIP.START")}
-			onClick={() => addFilter(row.date)}
-		>
-			{t("dateFormats.date.short", { date: renderValidDate(row.date) })}
-		</button>
+		<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.START")}>
+			<button
+				className="button-like-anchor crosslink"
+				onClick={() => addFilter(row.date)}
+			>
+				{t("dateFormats.date.short", { date: renderValidDate(row.date) })}
+			</button>
+		</Tooltip>
 	);
 };
 
diff --git a/src/components/events/partials/EventsLocationCell.tsx b/src/components/events/partials/EventsLocationCell.tsx
index edd7796cc2..2117d5e16d 100644
--- a/src/components/events/partials/EventsLocationCell.tsx
+++ b/src/components/events/partials/EventsLocationCell.tsx
@@ -6,6 +6,7 @@ import { connect } from "react-redux";
 import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the location cells of events in the table view
@@ -34,13 +35,14 @@ const EventsLocationCell = ({
 
 	return (
 		// Link template for location of event
-		<button
-			className="button-like-anchor crosslink"
-			title={t("EVENTS.EVENTS.TABLE.TOOLTIP.LOCATION")}
-			onClick={() => addFilter(row.location)}
-		>
-			{row.location}
-		</button>
+		<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.LOCATION")}>
+			<button
+				className="button-like-anchor crosslink"
+				onClick={() => addFilter(row.location)}
+			>
+				{row.location}
+			</button>
+		</Tooltip>
 	);
 };
 
diff --git a/src/components/events/partials/EventsPresentersCell.tsx b/src/components/events/partials/EventsPresentersCell.tsx
index 947e224bd8..bd77364354 100644
--- a/src/components/events/partials/EventsPresentersCell.tsx
+++ b/src/components/events/partials/EventsPresentersCell.tsx
@@ -6,6 +6,7 @@ import { connect } from "react-redux";
 import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the presenters cells of events in the table view
@@ -39,14 +40,14 @@ const EventsPresentersCell = ({
 		// Repeat for each presenter
 // @ts-expect-error TS(7006): Parameter 'presenter' implicitly has an 'any' type... Remove this comment to see the full error message
 		row.presenters.map((presenter, key) => (
-			<button
-				className="button-like-anchor metadata-entry"
-				key={key}
-				title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PRESENTER")}
-				onClick={() => addFilter(presenter)}
-			>
-				{presenter}
-			</button>
+			<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PRESENTER")} key={key}>
+				<button
+					className="button-like-anchor metadata-entry"
+					onClick={() => addFilter(presenter)}
+				>
+					{presenter}
+				</button>
+			</Tooltip>
 		))
 	);
 };
diff --git a/src/components/events/partials/EventsSeriesCell.tsx b/src/components/events/partials/EventsSeriesCell.tsx
index 944eb2e12b..2f91f637c0 100644
--- a/src/components/events/partials/EventsSeriesCell.tsx
+++ b/src/components/events/partials/EventsSeriesCell.tsx
@@ -6,6 +6,7 @@ import { connect } from "react-redux";
 import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the series cells of events in the table view
@@ -35,13 +36,14 @@ const EventsSeriesCell = ({
 	return (
 		!!row.series && (
 			// Link template for series of event
-			<button
-				className="button-like-anchor crosslink"
-				title={t("EVENTS.EVENTS.TABLE.TOOLTIP.SERIES")}
-				onClick={() => addFilter(row.series)}
-			>
-				{row.series.title}
-			</button>
+			<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.SERIES")}>
+				<button
+					className="button-like-anchor crosslink"
+					onClick={() => addFilter(row.series)}
+				>
+					{row.series.title}
+				</button>
+			</Tooltip>
 		)
 	);
 };
diff --git a/src/components/events/partials/EventsStatusCell.tsx b/src/components/events/partials/EventsStatusCell.tsx
index 64738d82c7..31443e2f48 100644
--- a/src/components/events/partials/EventsStatusCell.tsx
+++ b/src/components/events/partials/EventsStatusCell.tsx
@@ -6,6 +6,7 @@ import { connect } from "react-redux";
 import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the status cells of events in the table view
@@ -33,13 +34,14 @@ const EventsStatusCell = ({
 	};
 
 	return (
-		<button
-			className="button-like-anchor crosslink"
-			onClick={() => addFilter(row.event_status)}
-			title={t("EVENTS.EVENTS.TABLE.TOOLTIP.STATUS")}
-		>
-			{t(row.displayable_status)}
-		</button>
+		<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.STATUS")}>
+			<button
+				className="button-like-anchor crosslink"
+				onClick={() => addFilter(row.event_status)}
+			>
+				{t(row.displayable_status)}
+			</button>
+		</Tooltip>
 	);
 };
 
diff --git a/src/components/events/partials/EventsTechnicalDateCell.tsx b/src/components/events/partials/EventsTechnicalDateCell.tsx
index 7ed2b9f73d..34d5ec7c18 100644
--- a/src/components/events/partials/EventsTechnicalDateCell.tsx
+++ b/src/components/events/partials/EventsTechnicalDateCell.tsx
@@ -7,6 +7,7 @@ import { connect } from "react-redux";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
 import { renderValidDate } from "../../../utils/dateUtils";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the technical date cells of events in the table view
@@ -35,14 +36,15 @@ const EventsTechnicalDateCell = ({
 
 	return (
 		// Link template for technical date of event
-		<button
-			className="button-like-anchor crosslink"
-			title={t("EVENTS.EVENTS.TABLE.TOOLTIP.START")}
+		<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.START")}>
+			<button
+				className="button-like-anchor crosslink"
 // @ts-expect-error TS(2554): Expected 1 arguments, but got 0.
-			onClick={() => addFilter()}
-		>
-			{t("dateFormats.date.short", { date: renderValidDate(row.technical_start) })}
-		</button>
+				onClick={() => addFilter()}
+			>
+				{t("dateFormats.date.short", { date: renderValidDate(row.technical_start) })}
+			</button>
+		</Tooltip>
 	);
 };
 
diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx
index f126dea4db..8b1cccb55f 100644
--- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx
@@ -27,6 +27,7 @@ import {
 } from "../../../../slices/eventDetailsSlice";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import { renderValidDate } from "../../../../utils/dateUtils";
+import { Tooltip } from "../../../shared/Tooltip";
 
 /**
  * This component manages the workflows tab of the event details modal
@@ -222,46 +223,43 @@ const EventDetailsWorkflowTab = ({
 																<td>
 																	{item.status ===
 																		"EVENTS.EVENTS.DETAILS.WORKFLOWS.OPERATION_STATUS.RUNNING" && (
-																		<button
-																			onClick={() =>
-																				workflowAction(item.id, "STOP")
-																			}
-																			className="button-like-anchor stop fa-fw"
-																			title={t(
-																				"EVENTS.EVENTS.DETAILS.WORKFLOWS.TOOLTIP.STOP"
-																			)}
-																		>
-																			{/* STOP */}
-																		</button>
+																		<Tooltip title={t("EVENTS.EVENTS.DETAILS.WORKFLOWS.TOOLTIP.STOP")}>
+																			<button
+																				onClick={() =>
+																					workflowAction(item.id, "STOP")
+																				}
+																				className="button-like-anchor stop fa-fw"
+																			>
+																				{/* STOP */}
+																			</button>
+																		</Tooltip>
 																	)}
 																	{item.status ===
 																		"EVENTS.EVENTS.DETAILS.WORKFLOWS.OPERATION_STATUS.PAUSED" && (
-																		<button
-																			onClick={() =>
-																				workflowAction(item.id, "NONE")
-																			}
-																			className="button-like-anchor fa fa-hand-stop-o fa-fw"
-																			style={{ color: "red" }}
-																			title={t(
-																				"EVENTS.EVENTS.DETAILS.WORKFLOWS.TOOLTIP.ABORT"
-																			)}
-																		>
-																			{/* Abort */}
-																		</button>
+																		<Tooltip title={t("EVENTS.EVENTS.DETAILS.WORKFLOWS.TOOLTIP.ABORT")}>
+																			<button
+																				onClick={() =>
+																					workflowAction(item.id, "NONE")
+																				}
+																				className="button-like-anchor fa fa-hand-stop-o fa-fw"
+																				style={{ color: "red" }}
+																			>
+																				{/* Abort */}
+																			</button>
+																		</Tooltip>
 																	)}
 																	{item.status ===
 																		"EVENTS.EVENTS.DETAILS.WORKFLOWS.OPERATION_STATUS.PAUSED" && (
-																		<button
-																			onClick={() =>
-																				workflowAction(item.id, "RETRY")
-																			}
-																			className="button-like-anchor fa fa-refresh fa-fw"
-																			title={t(
-																				"EVENTS.EVENTS.DETAILS.WORKFLOWS.TOOLTIP.RETRY"
-																			)}
-																		>
-																			{/* Retry */}
-																		</button>
+																		<Tooltip title={t("EVENTS.EVENTS.DETAILS.WORKFLOWS.TOOLTIP.RETRY")}>
+																			<button
+																				onClick={() =>
+																					workflowAction(item.id, "RETRY")
+																				}
+																				className="button-like-anchor fa fa-refresh fa-fw"
+																			>
+																				{/* Retry */}
+																			</button>
+																		</Tooltip>
 																	)}
 																	{(item.status ===
 																		"EVENTS.EVENTS.DETAILS.WORKFLOWS.OPERATION_STATUS.SUCCEEDED" ||
@@ -271,15 +269,18 @@ const EventDetailsWorkflowTab = ({
 																			"EVENTS.EVENTS.DETAILS.WORKFLOWS.OPERATION_STATUS.STOPPED") &&
 																		!isCurrentWorkflow(item.id) &&
 																		isRoleWorkflowDelete && (
-																			<button
-																				onClick={() => deleteWorkflow(item.id)}
-																				className="button-like-anchor remove fa-fw"
+																			<Tooltip
 																				title={t(
 																					"EVENTS.EVENTS.DETAILS.WORKFLOWS.TOOLTIP.DELETE"
 																				)}
 																			>
-																				{/* DELETE */}
-																			</button>
+																				<button
+																					onClick={() => deleteWorkflow(item.id)}
+																					className="button-like-anchor remove fa-fw"
+																				>
+																					{/* DELETE */}
+																				</button>
+																			</Tooltip>
 																		)}
 																</td>
 															)}
diff --git a/src/components/events/partials/SeriesActionsCell.tsx b/src/components/events/partials/SeriesActionsCell.tsx
index 8945df0af2..11b72cfd4c 100644
--- a/src/components/events/partials/SeriesActionsCell.tsx
+++ b/src/components/events/partials/SeriesActionsCell.tsx
@@ -22,6 +22,8 @@ import {
 	deleteSeries,
 } from "../../../slices/seriesSlice";
 
+import { Tooltip } from "../../shared/Tooltip";
+
 /**
  * This component renders the action cells of series in the table view
  */
@@ -72,11 +74,12 @@ const SeriesActionsCell = ({
 		<>
 			{/* series details */}
 			{hasAccess("ROLE_UI_SERIES_DETAILS_VIEW", user) && (
-				<button
-					onClick={() => showSeriesDetailsModal()}
-					className="button-like-anchor more-series"
-					title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}
-				/>
+				<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}>
+					<button
+						onClick={() => showSeriesDetailsModal()}
+						className="button-like-anchor more-series"
+					/>
+				</Tooltip>
 			)}
 
 			{displaySeriesDetailsModal && (
@@ -89,11 +92,13 @@ const SeriesActionsCell = ({
 
 			{/* delete series */}
 			{hasAccess("ROLE_UI_SERIES_DELETE", user) && (
-				<button
-					onClick={() => showDeleteConfirmation()}
-					className="button-like-anchor remove"
-					title={t("EVENTS.SERIES.TABLE.TOOLTIP.DELETE")}
-				/>
+				<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DELETE")}>
+					<button
+						onClick={() => showDeleteConfirmation()}
+						className="button-like-anchor remove"
+
+					/>
+				</Tooltip>
 			)}
 
 			{displayDeleteConfirmation && (
diff --git a/src/components/events/partials/SeriesTitleCell.tsx b/src/components/events/partials/SeriesTitleCell.tsx
index f0a7cba199..d4ec21cf21 100644
--- a/src/components/events/partials/SeriesTitleCell.tsx
+++ b/src/components/events/partials/SeriesTitleCell.tsx
@@ -5,6 +5,7 @@ import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { setSpecificEventFilter } from "../../../slices/tableFilterSlice";
 import { Link } from "react-router-dom";
 import { useAppDispatch } from "../../../store";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the title cells of series in the table view
@@ -28,14 +29,15 @@ const SeriesTitleCell = ({
 	};
 
 	return (
-		<Link
-			to="/events/events"
-			className="crosslink"
-			title={t("EVENTS.SERIES.TABLE.TOOLTIP.SERIES")}
-			onClick={async () => await redirectToEvents(row.id)}
-		>
-			{row.title}
-		</Link>
+		<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.SERIES")}>
+			<Link
+				to="/events/events"
+				className="crosslink"
+				onClick={async () => await redirectToEvents(row.id)}
+			>
+				{row.title}
+			</Link>
+		</Tooltip>
 	);
 };
 
diff --git a/src/components/recordings/partials/RecordingsActionCell.tsx b/src/components/recordings/partials/RecordingsActionCell.tsx
index 808787feda..804f436b53 100644
--- a/src/components/recordings/partials/RecordingsActionCell.tsx
+++ b/src/components/recordings/partials/RecordingsActionCell.tsx
@@ -8,6 +8,7 @@ import { hasAccess } from "../../../utils/utils";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { deleteRecording } from "../../../slices/recordingSlice";
 import { fetchRecordingDetails } from "../../../slices/recordingDetailsSlice";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the action cells of recordings in the table view
@@ -47,11 +48,12 @@ const RecordingsActionCell = ({
 		<>
 			{/* view details location/recording */}
 			{hasAccess("ROLE_UI_LOCATIONS_DETAILS_VIEW", user) && (
-				<button
-					className="button-like-anchor more"
-					title={t("RECORDINGS.RECORDINGS.TABLE.TOOLTIP.DETAILS")}
-					onClick={() => showRecordingDetails()}
-				/>
+				<Tooltip title={t("RECORDINGS.RECORDINGS.TABLE.TOOLTIP.DETAILS")}>
+					<button
+						className="button-like-anchor more"
+						onClick={() => showRecordingDetails()}
+					/>
+				</Tooltip>
 			)}
 
 			{displayRecordingDetails && (
@@ -63,11 +65,12 @@ const RecordingsActionCell = ({
 
 			{/* delete location/recording */}
 			{hasAccess("ROLE_UI_LOCATIONS_DELETE", user) && (
-				<button
-					className="button-like-anchor remove"
-					title={t("RECORDINGS.RECORDINGS.TABLE.TOOLTIP.DELETE")}
-					onClick={() => setDeleteConfirmation(true)}
-				/>
+				<Tooltip title={t("RECORDINGS.RECORDINGS.TABLE.TOOLTIP.DELETE")}>
+					<button
+						className="button-like-anchor remove"
+						onClick={() => setDeleteConfirmation(true)}
+					/>
+				</Tooltip>
 			)}
 
 			{displayDeleteConfirmation && (
diff --git a/src/components/recordings/partials/RecordingsNameCell.tsx b/src/components/recordings/partials/RecordingsNameCell.tsx
index 875786ad52..0c9bf3cb3c 100644
--- a/src/components/recordings/partials/RecordingsNameCell.tsx
+++ b/src/components/recordings/partials/RecordingsNameCell.tsx
@@ -5,6 +5,7 @@ import { setSpecificEventFilter } from "../../../slices/tableFilterSlice";
 import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { connect } from "react-redux";
 import { useAppDispatch } from "../../../store";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the name cells of recordings in the table view
@@ -28,14 +29,15 @@ const RecordingsNameCell = ({
 	};
 
 	return (
-		<Link
-			to="/events/events"
-			className="crosslink"
-			onClick={async () => await redirectToEvents(row.Name)}
-			title={t("RECORDINGS.RECORDINGS.TABLE.TOOLTIP.NAME")}
-		>
-			{row.name}
-		</Link>
+		<Tooltip title={t("RECORDINGS.RECORDINGS.TABLE.TOOLTIP.NAME")}>
+			<Link
+				to="/events/events"
+				className="crosslink"
+				onClick={async () => await redirectToEvents(row.Name)}
+			>
+				{row.name}
+			</Link>
+		</Tooltip>
 	);
 };
 
diff --git a/src/components/shared/MainNav.tsx b/src/components/shared/MainNav.tsx
index 3561e6ac1f..2c7c6da73e 100644
--- a/src/components/shared/MainNav.tsx
+++ b/src/components/shared/MainNav.tsx
@@ -31,6 +31,7 @@ import { fetchServers } from "../../slices/serverSlice";
 import { fetchSeries } from "../../slices/seriesSlice";
 import { fetchJobs } from "../../slices/jobSlice";
 import { fetchEvents } from "../../slices/eventSlice";
+import { Tooltip } from "./Tooltip";
 
 /**
  * This component renders the main navigation that opens when the burger button is clicked
@@ -232,77 +233,92 @@ const MainNav = ({
 							{/* todo: more than one href? how? roles? (see MainNav admin-ui-frontend)*/}
 							{hasAccess("ROLE_UI_NAV_RECORDINGS_VIEW", user) &&
 								(hasAccess("ROLE_UI_EVENTS_VIEW", user) ? (
-									<Link to="/events/events" onClick={() => loadEvents()}>
-										<i className="events" title={t("NAV.EVENTS.TITLE")} />
-									</Link>
+									<Tooltip title={t("NAV.EVENTS.TITLE")}>
+										<Link to="/events/events" onClick={() => loadEvents()}>
+											<i className="events" />
+										</Link>
+									</Tooltip>
 								) : (
 									hasAccess("ROLE_UI_SERIES_VIEW", user) && (
-										<Link to="/events/series" onClick={() => loadSeries()}>
-											<i className="events" title={t("NAV.EVENTS.TITLE")} />
-										</Link>
+										<Tooltip title={t("NAV.EVENTS.TITLE")}>
+											<Link to="/events/series" onClick={() => loadSeries()}>
+												<i className="events" />
+											</Link>
+										</Tooltip>
 									)
 								))}
 							{hasAccess("ROLE_UI_NAV_CAPTURE_VIEW", user) &&
 								hasAccess("ROLE_UI_LOCATIONS_VIEW", user) && (
-									<Link
-										to="/recordings/recordings"
-										onClick={() => loadRecordings()}
-									>
-										<i
-											className="recordings"
-											title={t("NAV.CAPTUREAGENTS.TITLE")}
-										/>
-									</Link>
+									<Tooltip title={t("NAV.CAPTUREAGENTS.TITLE")}>
+										<Link
+											to="/recordings/recordings"
+											onClick={() => loadRecordings()}
+										>
+											<i
+												className="recordings"
+											/>
+										</Link>
+									</Tooltip>
 								)}
 							{hasAccess("ROLE_UI_NAV_SYSTEMS_VIEW", user) &&
 								(hasAccess("ROLE_UI_JOBS_VIEW", user) ? (
-									<Link to="/systems/jobs" onClick={() => loadJobs()}>
-										<i className="systems" title={t("NAV.SYSTEMS.TITLE")} />
-									</Link>
+									<Tooltip  title={t("NAV.SYSTEMS.TITLE")}>
+										<Link to="/systems/jobs" onClick={() => loadJobs()}>
+											<i className="systems" />
+										</Link>
+									</Tooltip>
 								) : hasAccess("ROLE_UI_SERVERS_VIEW", user) ? (
-									<Link to="/systems/servers" onClick={() => loadServers()}>
-										<i className="systems" title={t("NAV.SYSTEMS.TITLE")} />
-									</Link>
+									<Tooltip title={t("NAV.SYSTEMS.TITLE")}>
+										<Link to="/systems/servers" onClick={() => loadServers()}>
+											<i className="systems" />
+										</Link>
+									</Tooltip>
 								) : (
 									hasAccess("ROLE_UI_SERVICES_VIEW", user) && (
-										<Link to="/systems/services" onClick={() => loadServices()}>
-											<i className="systems" title={t("NAV.SYSTEMS.TITLE")} />
-										</Link>
+										<Tooltip title={t("NAV.SYSTEMS.TITLE")}>
+											<Link to="/systems/services" onClick={() => loadServices()}>
+												<i className="systems" />
+											</Link>
+										</Tooltip>
 									)
 								))}
 							{hasAccess("ROLE_UI_NAV_ORGANIZATION_VIEW", user) &&
 								(hasAccess("ROLE_UI_USERS_VIEW", user) ? (
-									<Link to="/users/users" onClick={() => loadUsers()}>
-										<i className="users" title={t("NAV.USERS.TITLE")} />
-									</Link>
+									<Tooltip title={t("NAV.USERS.TITLE")}>
+										<Link to="/users/users" onClick={() => loadUsers()}>
+											<i className="users" />
+										</Link>
+									</Tooltip>
 								) : hasAccess("ROLE_UI_GROUPS_VIEW", user) ? (
-									<Link to="/users/groups" onClick={() => loadGroups()}>
-										<i className="users" title={t("NAV.USERS.TITLE")} />
-									</Link>
+									<Tooltip title={t("NAV.USERS.TITLE")}>
+										<Link to="/users/groups" onClick={() => loadGroups()}>
+											<i className="users" />
+										</Link>
+									</Tooltip>
 								) : (
 									hasAccess("ROLE_UI_ACLS_VIEW", user) && (
-										<Link to="/users/acls" onClick={() => loadAcls()}>
-											<i className="users" title={t("NAV.USERS.TITLE")} />
-										</Link>
+										<Tooltip title={t("NAV.USERS.TITLE")}>
+											<Link to="/users/acls" onClick={() => loadAcls()}>
+												<i className="users" />
+											</Link>
+										</Tooltip>
 									)
 								))}
 							{hasAccess("ROLE_UI_NAV_CONFIGURATION_VIEW", user) &&
 								hasAccess("ROLE_UI_THEMES_VIEW", user) && (
-									<Link to="/configuration/themes" onClick={() => loadThemes()}>
-										<i
-											className="configuration"
-											title={t("NAV.CONFIGURATION.TITLE")}
-										/>
-									</Link>
+									<Tooltip title={t("NAV.CONFIGURATION.TITLE")}>
+										<Link to="/configuration/themes" onClick={() => loadThemes()}>
+											<i className="configuration" />
+										</Link>
+									</Tooltip>
 								)}
 							{hasAccess("ROLE_UI_NAV_STATISTICS_VIEW", user) &&
 								hasAccess("ROLE_UI_STATISTICS_ORGANIZATION_VIEW", user) && (
-									<Link to="/statistics/organization">
-										<i
-											className="statistics"
-											title={t("NAV.STATISTICS.TITLE")}
-										/>
-									</Link>
+									<Tooltip title={t("NAV.STATISTICS.TITLE")}>
+										<Link to="/statistics/organization">
+											<i className="statistics" />
+										</Link>
+									</Tooltip>
 								)}
 						</div>
 					</nav>
diff --git a/src/components/shared/Stats.tsx b/src/components/shared/Stats.tsx
index 7a036c4807..44f2fca0c2 100644
--- a/src/components/shared/Stats.tsx
+++ b/src/components/shared/Stats.tsx
@@ -10,6 +10,7 @@ import { connect } from "react-redux";
 import { loadEventsIntoTable } from "../../thunks/tableThunks";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchEvents } from "../../slices/eventSlice";
+import { Tooltip } from "./Tooltip";
 
 /**
  * This component renders the status bar of the event view and filters depending on these
@@ -58,24 +59,25 @@ const Stats = ({
 				{/* Show one counter for each status */}
 				{stats.map((st, key) => (
 					<div className="col" key={key}>
-						<div
-							className="stat"
-							onClick={() => showStatsFilter(st)}
-							title={t(st.description)}
-						>
-							<h1>{st.count}</h1>
-							{/* Show the description of the status, if defined,
-                            else show name of filter and its value*/}
-							{!!st.description ? (
-								<span>{t(st.description)}</span>
-							) : (
-								st.filters.map((filter, key) => (
-									<span key={key}>
-										{t(filter.filter)}: {t(filter.value)}
-									</span>
-								))
-							)}
-						</div>
+						<Tooltip title={t(st.description)}>
+							<div
+								className="stat"
+								onClick={() => showStatsFilter(st)}
+							>
+								<h1>{st.count}</h1>
+								{/* Show the description of the status, if defined,
+                        	    else show name of filter and its value*/}
+								{!!st.description ? (
+									<span>{t(st.description)}</span>
+								) : (
+									st.filters.map((filter, key) => (
+										<span key={key}>
+											{t(filter.filter)}: {t(filter.value)}
+										</span>
+									))
+								)}
+							</div>
+						</Tooltip>
 					</div>
 				))}
 			</div>
diff --git a/src/components/shared/TableFilterProfiles.tsx b/src/components/shared/TableFilterProfiles.tsx
index 07d2584554..98d780f659 100644
--- a/src/components/shared/TableFilterProfiles.tsx
+++ b/src/components/shared/TableFilterProfiles.tsx
@@ -15,6 +15,7 @@ import { loadFilterProfile } from "../../slices/tableFilterSlice";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
+import { Tooltip } from "./Tooltip";
 
 /**
  * This component renders the table filter profiles in the upper right corner when clicked on settings icon of the
@@ -164,25 +165,28 @@ const TableFiltersProfiles = ({
 									// repeat for each profile in profiles filtered for currently shown resource (else-case)
 									currentProfiles.map((profile, key) => (
 										<li key={key}>
-											<button
-												title="profile.description"
-												onClick={() => chooseFilterProfile(profile.filterMap)}
-                        className="button-like-anchor"
-											>
-												{profile.name.substr(0, 70)}
-											</button>
+											<Tooltip title="profile.description">
+												<button
+													onClick={() => chooseFilterProfile(profile.filterMap)}
+                        className="button-li	ke-anchor"
+												>
+													{profile.name.substr(0, 70)}
+												</button>
+											</Tooltip>
 											{/* Settings icon to edit profile */}
-											<button
-												onClick={() => editFilterProfile(profile)}
-												title={t("TABLE_FILTERS.PROFILES.EDIT")}
-												className="button-like-anchor icon edit"
-											/>
+											<Tooltip title={t("TABLE_FILTERS.PROFILES.EDIT")}>
+												<button
+													onClick={() => editFilterProfile(profile)}
+													className="button-like-anchor icon edit"
+												/>
+											</Tooltip>
 											{/* Remove icon to remove profile */}
-											<button
-												onClick={() => dispatch(removeFilterProfile(profile))}
-												title={t("TABLE_FILTERS.PROFILES.REMOVE")}
-												className="button-like-anchor icon remove"
-											/>
+											<Tooltip title={t("TABLE_FILTERS.PROFILES.REMOVE")}>
+												<button
+													onClick={() => dispatch(removeFilterProfile(profile))}
+													className="button-like-anchor icon remove"
+												/>
+											</Tooltip>
 										</li>
 									))
 								)}
diff --git a/src/components/shared/TableFilters.tsx b/src/components/shared/TableFilters.tsx
index 793d494f66..7653624983 100644
--- a/src/components/shared/TableFilters.tsx
+++ b/src/components/shared/TableFilters.tsx
@@ -28,6 +28,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 import moment from "moment";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { renderValidDate } from "../../utils/dateUtils";
+import { Tooltip } from "./Tooltip";
 
 /**
  * This component renders the table filters in the upper right corner of the table
@@ -260,11 +261,12 @@ const TableFilters = ({
 				{!!filterMap && (
 					<div className="table-filter">
 						<div className="filters">
-							<i
-								title={t("TABLE_FILTERS.ADD")}
-								className="fa fa-filter"
-								onClick={() => setFilterSelector(!showFilterSelector)}
-							/>
+							<Tooltip title={t("TABLE_FILTERS.ADD")}>
+								<i
+									className="fa fa-filter"
+									onClick={() => setFilterSelector(!showFilterSelector)}
+								/>
+							</Tooltip>
 
 							{/*show if icon is clicked*/}
 							{showFilterSelector && (
@@ -352,30 +354,33 @@ const TableFilters = ({
 											}
 										</span>
 										{/* Remove icon in blue area around filter */}
-										<button
-											title={t("TABLE_FILTERS.REMOVE")}
-											onClick={() => removeFilter(filter)}
-											className="button-like-anchor"
-										>
-											<i className="fa fa-times" />
-										</button>
+										<Tooltip title={t("TABLE_FILTERS.REMOVE")}>
+											<button
+												onClick={() => removeFilter(filter)}
+												className="button-like-anchor"
+											>
+												<i className="fa fa-times" />
+											</button>
+										</Tooltip>
 									</span>
 								);
 							})}
 						</div>
 
 						{/* Remove icon to clear all filters */}
-						<i
-							onClick={removeFilters}
-							title={t("TABLE_FILTERS.CLEAR")}
-							className="clear fa fa-times"
-						/>
+						<Tooltip title={t("TABLE_FILTERS.CLEAR")}>
+							<i
+								onClick={removeFilters}
+								className="clear fa fa-times"
+							/>
+						</Tooltip>
 						{/* Settings icon to open filters profile dialog (save and editing filter profiles)*/}
-						<i
-							onClick={() => setFilterSettings(!showFilterSettings)}
-							title={t("TABLE_FILTERS.PROFILES.FILTERS_HEADER")}
-							className="settings fa fa-cog fa-times"
-						/>
+						<Tooltip title={t("TABLE_FILTERS.PROFILES.FILTERS_HEADER")}>
+							<i
+								onClick={() => setFilterSettings(!showFilterSettings)}
+								className="settings fa fa-cog fa-times"
+							/>
+						</Tooltip>
 
 						{/* Filter profile dialog for saving and editing filter profiles */}
 						<TableFilterProfiles
diff --git a/src/components/shared/Tooltip.tsx b/src/components/shared/Tooltip.tsx
new file mode 100644
index 0000000000..c24c58e690
--- /dev/null
+++ b/src/components/shared/Tooltip.tsx
@@ -0,0 +1,35 @@
+import { useRef } from "react";
+import MuiTooltip, { TooltipProps } from "@mui/material/Tooltip";
+
+export const Tooltip = ({ className, ...props }: TooltipProps) => {
+	const positionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+	const areaRef = useRef<HTMLDivElement>(null);
+
+	return (
+		<MuiTooltip
+			{...props}
+			classes={{ popper: className }}
+			arrow
+			describeChild
+			enterDelay={100}
+			enterNextDelay={100}
+			leaveDelay={150}
+			placement="top"
+			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,
+						);
+					},
+				},
+			}}
+		/>
+	);
+};
diff --git a/src/components/systems/partials/ServicesActionsCell.tsx b/src/components/systems/partials/ServicesActionsCell.tsx
index a290f6ad94..2cc129703d 100644
--- a/src/components/systems/partials/ServicesActionsCell.tsx
+++ b/src/components/systems/partials/ServicesActionsCell.tsx
@@ -6,6 +6,7 @@ import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchServices, restartService } from "../../../slices/serviceSlice";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the action cells of services in the table view
@@ -32,11 +33,12 @@ const ServicesActionCell = ({
 	return (
 		row.status !== "SYSTEMS.SERVICES.STATUS.NORMAL" &&
 		hasAccess("ROLE_UI_SERVICES_STATUS_EDIT", user) && (
-			<button
-				className="button-like-anchor sanitize fa fa-undo"
-				onClick={() => onClickRestart()}
-				title={t("SYSTEMS.SERVICES.TABLE.SANITIZE")}
-			/>
+			<Tooltip title={t("SYSTEMS.SERVICES.TABLE.SANITIZE")}>
+				<button
+					className="button-like-anchor sanitize fa fa-undo"
+					onClick={() => onClickRestart()}
+				/>
+			</Tooltip>
 		)
 	);
 };
diff --git a/src/components/users/partials/AclsActionsCell.tsx b/src/components/users/partials/AclsActionsCell.tsx
index dac11805f6..04aa43a8fe 100644
--- a/src/components/users/partials/AclsActionsCell.tsx
+++ b/src/components/users/partials/AclsActionsCell.tsx
@@ -7,6 +7,7 @@ import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchAclDetails } from "../../../slices/aclDetailsSlice";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the action cells of acls in the table view
@@ -45,11 +46,12 @@ const AclsActionsCell = ({
 		<>
 			{/* edit/show ACL details */}
 			{hasAccess("ROLE_UI_ACLS_EDIT", user) && (
-				<button
-					onClick={() => showAclDetails()}
-					className="button-like-anchor more"
-					title={t("USERS.ACLS.TABLE.TOOLTIP.DETAILS")}
-				/>
+				<Tooltip title={t("USERS.ACLS.TABLE.TOOLTIP.DETAILS")}>
+					<button
+						onClick={() => showAclDetails()}
+						className="button-like-anchor more"
+					/>
+				</Tooltip>
 			)}
 
 			{displayAclDetails && (
@@ -58,11 +60,12 @@ const AclsActionsCell = ({
 
 			{/* delete ACL */}
 			{hasAccess("ROLE_UI_ACLS_DELETE", user) && (
-				<button
-					onClick={() => setDeleteConfirmation(true)}
-					className="button-like-anchor remove"
-					title={t("USERS.ACLS.TABLE.TOOLTIP.DETAILS")}
-				/>
+				<Tooltip title={t("USERS.ACLS.TABLE.TOOLTIP.DETAILS")}>
+					<button
+						onClick={() => setDeleteConfirmation(true)}
+						className="button-like-anchor remove"
+					/>
+				</Tooltip>
 			)}
 
 			{/* Confirmation for deleting an ACL */}
diff --git a/src/components/users/partials/GroupsActionsCell.tsx b/src/components/users/partials/GroupsActionsCell.tsx
index 42ea88ec7e..c53e254133 100644
--- a/src/components/users/partials/GroupsActionsCell.tsx
+++ b/src/components/users/partials/GroupsActionsCell.tsx
@@ -8,6 +8,7 @@ import { hasAccess } from "../../../utils/utils";
 import { useAppDispatch, useAppSelector  } from "../../../store";
 import { deleteGroup } from "../../../slices/groupSlice";
 import { fetchGroupDetails } from "../../../slices/groupDetailsSlice";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the action cells of groups in the table view
@@ -46,11 +47,12 @@ const GroupsActionsCell = ({
 		<>
 			{/*edit/show group */}
 			{hasAccess("ROLE_UI_GROUPS_EDIT", user) && (
-				<button
-					onClick={() => showGroupDetails()}
-					className="button-like-anchor more"
-					title={t("USERS.GROUPS.TABLE.TOOLTIP.DETAILS")}
-				/>
+				<Tooltip title={t("USERS.GROUPS.TABLE.TOOLTIP.DETAILS")}>
+					<button
+						onClick={() => showGroupDetails()}
+						className="button-like-anchor more"
+					/>
+				</Tooltip>
 			)}
 
 			{/*modal displaying details about group*/}
@@ -60,11 +62,12 @@ const GroupsActionsCell = ({
 
 			{/* delete group */}
 			{hasAccess("ROLE_UI_GROUPS_DELETE", user) && (
-				<button
-					onClick={() => setDeleteConfirmation(true)}
-					className="button-like-anchor remove"
-					title={t("USERS.GROUPS.TABLE.TOOLTIP.DETAILS")}
-				/>
+				<Tooltip title={t("USERS.GROUPS.TABLE.TOOLTIP.DETAILS")}>
+					<button
+						onClick={() => setDeleteConfirmation(true)}
+						className="button-like-anchor remove"
+					/>
+				</Tooltip>
 			)}
 
 			{/*Confirmation for deleting a group*/}
diff --git a/src/components/users/partials/UsersActionsCell.tsx b/src/components/users/partials/UsersActionsCell.tsx
index 4b2c724c81..edddf7e9dc 100644
--- a/src/components/users/partials/UsersActionsCell.tsx
+++ b/src/components/users/partials/UsersActionsCell.tsx
@@ -8,6 +8,7 @@ import { hasAccess } from "../../../utils/utils";
 import { deleteUser } from "../../../slices/userSlice";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchUserDetails } from "../../../slices/userDetailsSlice";
+import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * This component renders the action cells of users in the table view
@@ -46,11 +47,12 @@ const UsersActionCell = ({
 		<>
 			{/* edit/show user details */}
 			{hasAccess("ROLE_UI_USERS_EDIT", user) && (
-				<button
-					onClick={() => showUserDetails()}
-					className="button-like-anchor more"
-					title={t("USERS.USERS.TABLE.TOOLTIP.DETAILS")}
-				/>
+				<Tooltip title={t("USERS.USERS.TABLE.TOOLTIP.DETAILS")}>
+					<button
+						onClick={() => showUserDetails()}
+						className="button-like-anchor more"
+					/>
+				</Tooltip>
 			)}
 
 			{displayUserDetails && (
@@ -59,11 +61,12 @@ const UsersActionCell = ({
 
 			{(row.manageable || (row.provider !== "opencast" && row.provider !== "system"))
 				&& hasAccess("ROLE_UI_USERS_DELETE", user) && <>
-					<button
-						onClick={() => setDeleteConfirmation(true)}
-						className="button-like-anchor remove"
-						title={t("USERS.USERS.TABLE.TOOLTIP.DETAILS")}
-					/>
+					<Tooltip title={t("USERS.USERS.TABLE.TOOLTIP.DETAILS")}>
+						<button
+							onClick={() => setDeleteConfirmation(true)}
+							className="button-like-anchor remove"
+						/>
+					</Tooltip>
 
 					{/* Confirmation for deleting a user */}
 					{displayDeleteConfirmation && (
diff --git a/src/components/users/partials/wizard/NewUserWizard.tsx b/src/components/users/partials/wizard/NewUserWizard.tsx
index 9fa6c29e18..c9fc403c9a 100644
--- a/src/components/users/partials/wizard/NewUserWizard.tsx
+++ b/src/components/users/partials/wizard/NewUserWizard.tsx
@@ -9,6 +9,7 @@ import { getUsernames } from "../../../../selectors/userSelectors";
 import { NewUserSchema } from "../../../../utils/validate";
 import { postNewUser } from "../../../../slices/userSlice";
 import { useAppDispatch, useAppSelector } from "../../../../store";
+import { Tooltip } from "../../../shared/Tooltip";
 
 /**
  * This component renders the new user wizard
@@ -52,13 +53,14 @@ const NewUserWizard = ({
 				>
 					{t("USERS.USERS.DETAILS.TABS.USER")}
 				</button>
-				<button
-					className={"button-like-anchor " + cn("wider", { active: tab === 1 })}
-					onClick={() => openTab(1)}
-					title={t("USERS.USERS.DETAILS.DESCRIPTION.ROLES")}
-				>
-					{t("USERS.USERS.DETAILS.TABS.ROLES")}
-				</button>
+				<Tooltip title={t("USERS.USERS.DETAILS.DESCRIPTION.ROLES")}>
+					<button
+						className={"button-like-anchor " + cn("wider", { active: tab === 1 })}
+						onClick={() => openTab(1)}
+					>
+						{t("USERS.USERS.DETAILS.TABS.ROLES")}
+					</button>
+				</Tooltip>
 			</nav>
 
 			{/* Initialize overall form */}
diff --git a/src/styles/components/_components-config.scss b/src/styles/components/_components-config.scss
index 0f7de57f5f..17c8b27cf4 100644
--- a/src/styles/components/_components-config.scss
+++ b/src/styles/components/_components-config.scss
@@ -41,6 +41,7 @@
 @import "popover";
 @import "collapsible-box";
 @import "about";
+@import "tooltips";
 
 // Integrated From Extensions
 @import "labels";
diff --git a/src/styles/components/_tooltips.scss b/src/styles/components/_tooltips.scss
new file mode 100644
index 0000000000..d736cdcfef
--- /dev/null
+++ b/src/styles/components/_tooltips.scss
@@ -0,0 +1,5 @@
+div.MuiTooltip-tooltip {
+	font-size: 0.9rem;
+	outline: 2px solid transparent;
+	line-height: 2;
+}