diff --git a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
index 63f6e3b485..2e8c9ad97f 100644
--- a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
+++ b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
@@ -113,7 +113,7 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => {
                 <PermissionIconButton
                     permission={UPDATE_ADDON}
                     onClick={() => toggleAddon(addon)}
-                    tooltip="Toggle addon"
+                    tooltipProps={{ title: 'Toggle addon' }}
                 >
                     <ConditionallyRender
                         condition={addon.enabled}
@@ -123,14 +123,14 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => {
                 </PermissionIconButton>
                 <PermissionIconButton
                     permission={UPDATE_ADDON}
-                    tooltip="Edit Addon"
+                    tooltipProps={{ title: 'Edit Addon' }}
                     onClick={() => navigate(`/addons/edit/${addon.id}`)}
                 >
                     <Edit />
                 </PermissionIconButton>
                 <PermissionIconButton
                     permission={DELETE_ADDON}
-                    tooltip="Remove Addon"
+                    tooltipProps={{ title: 'Remove Addon' }}
                     onClick={() => {
                         setDeletedAddon(addon);
                         setShowDelete(true);
diff --git a/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx b/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
index 0b7acfef66..3df6e30fdd 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
@@ -25,6 +25,7 @@ import { useLocationSettings } from 'hooks/useLocationSettings';
 import { formatDateYMD } from 'utils/formatDate';
 import { ProjectsList } from './ProjectsList/ProjectsList';
 import { useStyles } from './ApiTokenList.styles';
+import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
 
 interface IApiToken {
     createdAt: Date;
@@ -191,7 +192,7 @@ export const ApiTokenList = () => {
                                     </Box>
                                 </TableCell>
                                 <TableCell className={styles.actionsContainer}>
-                                    <Tooltip title="Copy token">
+                                    <Tooltip title="Copy token" arrow>
                                         <IconButton
                                             onClick={() => {
                                                 copyToken(item.secret);
@@ -204,7 +205,7 @@ export const ApiTokenList = () => {
                                     <ConditionallyRender
                                         condition={hasAccess(DELETE_API_TOKEN)}
                                         show={
-                                            <Tooltip title="Delete token">
+                                            <Tooltip title="Delete token" arrow>
                                                 <IconButton
                                                     onClick={() => {
                                                         setDeleteToken(item);
diff --git a/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx b/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
index 530fdecf4b..2125bf8684 100644
--- a/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
+++ b/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
@@ -37,7 +37,7 @@ export const UserToken = ({ token }: IUserTokenProps) => {
             }}
         >
             {token}
-            <Tooltip title="Copy token">
+            <Tooltip title="Copy token" arrow>
                 <IconButton onClick={copyToken} size="large">
                     <CopyIcon />
                 </IconButton>
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
index c95857759b..92e089d8ec 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
@@ -55,7 +55,7 @@ const RoleListItem = ({
                             navigate(`/admin/roles/${id}/edit`);
                         }}
                         permission={ADMIN}
-                        tooltip="Edit role"
+                        tooltipProps={{ title: 'Edit role' }}
                     >
                         <Edit />
                     </PermissionIconButton>
@@ -68,7 +68,7 @@ const RoleListItem = ({
                             setDelDialog(true);
                         }}
                         permission={ADMIN}
-                        tooltip="Remove role"
+                        tooltipProps={{ title: 'Remove role' }}
                     >
                         <Delete />
                     </PermissionIconButton>
diff --git a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
index bc7a32ffd1..391a436da1 100644
--- a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
+++ b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
@@ -47,7 +47,7 @@ const UserInviteLink = ({ inviteLink }: IInviteLinkProps) => {
             }}
         >
             {inviteLink}
-            <Tooltip title="Copy link">
+            <Tooltip title="Copy link" arrow>
                 <IconButton onClick={handleCopy} size="large">
                     <CopyIcon />
                 </IconButton>
diff --git a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
index b057dc8cb7..0bbacd33d7 100644
--- a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
+++ b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
@@ -124,7 +124,7 @@ export const ApplicationEdit = () => {
                             />
 
                             <PermissionButton
-                                tooltip="Delete application"
+                                tooltipProps={{ title: 'Delete application' }}
                                 onClick={toggleModal}
                                 permission={UPDATE_APPLICATION}
                             >
diff --git a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts
index ae6946169d..34a9425836 100644
--- a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts
+++ b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts
@@ -5,13 +5,16 @@ export const useStyles = makeStyles()(theme => ({
         display: 'flex',
         alignItems: 'center',
         borderRadius: '1rem',
+        '& .MuiInputLabel-root[data-shrink="false"]': {
+            top: 3,
+        },
     },
     icon: {
         background: theme.palette.primary.main,
-        height: 40,
+        height: 48,
+        width: 48,
         display: 'flex',
         alignItems: 'center',
-        width: 40,
         justifyContent: 'center',
         paddingLeft: 6,
         borderTopLeftRadius: 40,
@@ -25,6 +28,7 @@ export const useStyles = makeStyles()(theme => ({
         flex: 1,
     },
     inputRoot: {
+        height: 48,
         borderTopLeftRadius: 0,
         borderBottomLeftRadius: 0,
         borderTopRightRadius: 50,
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
index 3ba8b83911..aab71ed12a 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
@@ -122,7 +122,7 @@ export const ConstraintAccordionEditHeader = ({
                 show={<p className={styles.editingBadge}>Updating...</p>}
                 elseShow={<p className={styles.editingBadge}>Editing</p>}
             />
-            <Tooltip title="Help">
+            <Tooltip title="Help" arrow>
                 <a
                     href="https://docs.getunleash.io/advanced/strategy_constraints"
                     style={{ marginLeft: 'auto' }}
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
index 1a9e481282..41e8365daf 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
@@ -1,5 +1,5 @@
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
-import { Chip, useMediaQuery, IconButton } from '@mui/material';
+import { Chip, useMediaQuery, IconButton, Tooltip } from '@mui/material';
 import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
 import { Delete, Edit } from '@mui/icons-material';
 import { IConstraint } from 'interfaces/strategy';
@@ -91,17 +91,21 @@ export const ConstraintAccordionViewHeader = ({
                 <ConditionallyRender
                     condition={Boolean(onEditClick)}
                     show={() => (
-                        <IconButton type="button" onClick={onEditClick}>
-                            <Edit titleAccess="Edit constraint" />
-                        </IconButton>
+                        <Tooltip title="Edit constraint" arrow>
+                            <IconButton type="button" onClick={onEditClick}>
+                                <Edit />
+                            </IconButton>
+                        </Tooltip>
                     )}
                 />
                 <ConditionallyRender
                     condition={Boolean(onDeleteClick)}
                     show={() => (
-                        <IconButton type="button" onClick={onDeleteClick}>
-                            <Delete titleAccess="Delete constraint" />
-                        </IconButton>
+                        <Tooltip title="Delete constraint" arrow>
+                            <IconButton type="button" onClick={onDeleteClick}>
+                                <Delete />
+                            </IconButton>
+                        </Tooltip>
                     )}
                 />
             </div>
diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
index 2e667dc6fe..6bd53816f1 100644
--- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx
+++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
@@ -95,7 +95,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
                     >
                         <h2 className={styles.subtitle}>
                             API Command{' '}
-                            <Tooltip title="Copy command">
+                            <Tooltip title="Copy command" arrow>
                                 <IconButton onClick={copyCommand} size="large">
                                     <FileCopy className={styles.icon} />
                                 </IconButton>
@@ -128,7 +128,7 @@ const MobileGuidance = ({
             <div className={styles.mobileGuidanceBgContainer}>
                 <MobileGuidanceBG className={styles.mobileGuidanceBackground} />
             </div>
-            <Tooltip title="Toggle help">
+            <Tooltip title="Toggle help" arrow>
                 <IconButton
                     className={styles.mobileGuidanceButton}
                     onClick={() => setOpen(prev => !prev)}
diff --git a/frontend/src/component/common/PermissionButton/PermissionButton.tsx b/frontend/src/component/common/PermissionButton/PermissionButton.tsx
index 7772d7a9c9..4e2b03ddb5 100644
--- a/frontend/src/component/common/PermissionButton/PermissionButton.tsx
+++ b/frontend/src/component/common/PermissionButton/PermissionButton.tsx
@@ -3,7 +3,10 @@ import { Lock } from '@mui/icons-material';
 import AccessContext from 'contexts/AccessContext';
 import React, { useContext } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
+import {
+    TooltipResolver,
+    ITooltipResolverProps,
+} from 'component/common/TooltipResolver/TooltipResolver';
 import { formatAccessText } from 'utils/formatAccessText';
 import { useId } from 'hooks/useId';
 
@@ -13,7 +16,7 @@ export interface IPermissionButtonProps extends Omit<ButtonProps, 'title'> {
     disabled?: boolean;
     projectId?: string;
     environmentId?: string;
-    tooltip?: string;
+    tooltipProps?: Omit<ITooltipResolverProps, 'children'>;
 }
 
 const PermissionButton: React.FC<IPermissionButtonProps> = ({
@@ -25,7 +28,7 @@ const PermissionButton: React.FC<IPermissionButtonProps> = ({
     disabled,
     projectId,
     environmentId,
-    tooltip,
+    tooltipProps,
     ...rest
 }) => {
     const { hasAccess } = useContext(AccessContext);
@@ -60,7 +63,11 @@ const PermissionButton: React.FC<IPermissionButtonProps> = ({
     access = handleAccess();
 
     return (
-        <TooltipResolver title={formatAccessText(access, tooltip)} arrow>
+        <TooltipResolver
+            {...tooltipProps}
+            title={formatAccessText(access, tooltipProps?.title)}
+            arrow
+        >
             <span id={id}>
                 <Button
                     onClick={onClick}
diff --git a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
index 9c00e3ff73..4f3fb2f4eb 100644
--- a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
+++ b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
@@ -2,21 +2,23 @@ import { IconButton, IconButtonProps } from '@mui/material';
 import React, { useContext, ReactNode } from 'react';
 import AccessContext from 'contexts/AccessContext';
 import { Link } from 'react-router-dom';
-import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
+import {
+    TooltipResolver,
+    ITooltipResolverProps,
+} from 'component/common/TooltipResolver/TooltipResolver';
 import { formatAccessText } from 'utils/formatAccessText';
-import { useId } from 'hooks/useId';
 
 interface IPermissionIconButtonProps {
     permission: string;
     projectId?: string;
     environmentId?: string;
     className?: string;
-    tooltip?: string;
     children?: ReactNode;
     disabled?: boolean;
     hidden?: boolean;
     type?: 'button';
     edge?: IconButtonProps['edge'];
+    tooltipProps?: Omit<ITooltipResolverProps, 'children'>;
 }
 
 interface IButtonProps extends IPermissionIconButtonProps {
@@ -33,11 +35,10 @@ const PermissionIconButton = ({
     projectId,
     children,
     environmentId,
-    tooltip,
+    tooltipProps,
     ...rest
 }: IButtonProps | ILinkProps) => {
     const { hasAccess } = useContext(AccessContext);
-    const id = useId();
     let access;
 
     if (projectId && environmentId) {
@@ -49,17 +50,14 @@ const PermissionIconButton = ({
     }
 
     return (
-        <TooltipResolver title={formatAccessText(access, tooltip)}>
-            <span id={id}>
-                <IconButton
-                    {...rest}
-                    disabled={!access}
-                    aria-labelledby={id}
-                    size="large"
-                >
-                    {children}
-                </IconButton>
-            </span>
+        <TooltipResolver
+            {...tooltipProps}
+            title={formatAccessText(access, tooltipProps?.title)}
+            arrow
+        >
+            <IconButton {...rest} disabled={!access} size="large">
+                {children}
+            </IconButton>
         </TooltipResolver>
     );
 };
diff --git a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
index 2b7ab77fd0..40f59958b5 100644
--- a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
+++ b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
@@ -76,7 +76,7 @@ const Toast = ({ title, text, type, confetti }: IToast) => {
                                 />
                             </div>
                         </div>
-                        <Tooltip title="Close">
+                        <Tooltip title="Close" arrow>
                             <IconButton
                                 onClick={hide}
                                 className={styles.buttonStyle}
diff --git a/frontend/src/component/common/TooltipResolver/TooltipResolver.tsx b/frontend/src/component/common/TooltipResolver/TooltipResolver.tsx
index f9d9822759..237bb45ee5 100644
--- a/frontend/src/component/common/TooltipResolver/TooltipResolver.tsx
+++ b/frontend/src/component/common/TooltipResolver/TooltipResolver.tsx
@@ -1,6 +1,6 @@
 import { Tooltip, TooltipProps } from '@mui/material';
 
-interface ITooltipResolverProps extends Omit<TooltipProps, 'title'> {
+export interface ITooltipResolverProps extends Omit<TooltipProps, 'title'> {
     title: string | undefined;
 }
 
@@ -14,7 +14,7 @@ export const TooltipResolver = ({
     }
 
     return (
-        <Tooltip {...rest} title={title}>
+        <Tooltip {...rest} title={title} arrow>
             {children}
         </Tooltip>
     );
diff --git a/frontend/src/component/context/ContextList/ContextList.tsx b/frontend/src/component/context/ContextList/ContextList.tsx
index ff54f2bc4c..28beae6a06 100644
--- a/frontend/src/component/context/ContextList/ContextList.tsx
+++ b/frontend/src/component/context/ContextList/ContextList.tsx
@@ -80,7 +80,7 @@ const ContextList: VFC = () => {
                 <ConditionallyRender
                     condition={hasAccess(UPDATE_CONTEXT_FIELD)}
                     show={
-                        <Tooltip title="Edit context field">
+                        <Tooltip title="Edit context field" arrow>
                             <IconButton
                                 onClick={() =>
                                     navigate(`/context/edit/${field.name}`)
@@ -95,7 +95,7 @@ const ContextList: VFC = () => {
                 <ConditionallyRender
                     condition={hasAccess(DELETE_CONTEXT_FIELD)}
                     show={
-                        <Tooltip title="Delete context field">
+                        <Tooltip title="Delete context field" arrow>
                             <IconButton
                                 aria-label="delete"
                                 onClick={() => {
@@ -118,7 +118,7 @@ const ContextList: VFC = () => {
                 <ConditionallyRender
                     condition={smallScreen}
                     show={
-                        <Tooltip title="Add context type">
+                        <Tooltip title="Add context type" arrow>
                             <IconButton
                                 onClick={() => navigate('/context/create')}
                                 size="large"
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
index cdf4bec4b4..614ab33004 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
@@ -162,7 +162,7 @@ const EnvironmentListItem = ({
             <ConditionallyRender
                 condition={updatePermission}
                 show={
-                    <Tooltip title={`${tooltipText} environment`}>
+                    <Tooltip title={`${tooltipText} environment`} arrow>
                         <IconButton
                             onClick={() => {
                                 setSelectedEnv(env);
@@ -178,7 +178,7 @@ const EnvironmentListItem = ({
             <ConditionallyRender
                 condition={updatePermission}
                 show={
-                    <Tooltip title="Edit environment">
+                    <Tooltip title="Edit environment" arrow>
                         <IconButton
                             disabled={env.protected}
                             onClick={() => {
@@ -194,7 +194,7 @@ const EnvironmentListItem = ({
             <ConditionallyRender
                 condition={hasAccess(DELETE_ENVIRONMENT)}
                 show={
-                    <Tooltip title="Delete environment">
+                    <Tooltip title="Delete environment" arrow>
                         <IconButton
                             disabled={env.protected}
                             onClick={() => {
diff --git a/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx b/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
index 82f5ce2fd0..ff5c999a5d 100644
--- a/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
+++ b/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
@@ -28,7 +28,7 @@ export const CreateFeatureButton = ({
         <ConditionallyRender
             condition={smallScreen}
             show={
-                <Tooltip title="Create feature toggle">
+                <Tooltip title="Create feature toggle" arrow>
                     <IconButton
                         component={Link}
                         to={createFeature.path}
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
index e51f8ce5b2..5c9e7c5955 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
@@ -69,7 +69,7 @@ export const FeatureStrategyRemove = ({
                         disabled={disabled}
                         permission={DELETE_FEATURE_STRATEGY}
                         data-testid={STRATEGY_FORM_REMOVE_ID}
-                        tooltip="Remove strategy"
+                        tooltipProps={{ title: 'Remove strategy' }}
                         type="button"
                     >
                         <Delete />
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx
index e9a59277ea..5ebece812a 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx
@@ -59,7 +59,7 @@ export const FeatureStrategySegmentChip = ({
             >
                 {segment.name}
             </Link>
-            <Tooltip title={previewIconTooltip}>
+            <Tooltip title={previewIconTooltip} arrow>
                 <button
                     type="button"
                     onClick={onTogglePreview}
@@ -70,7 +70,7 @@ export const FeatureStrategySegmentChip = ({
                     {togglePreviewIcon}
                 </button>
             </Tooltip>
-            <Tooltip title="Remove segment">
+            <Tooltip title="Remove segment" arrow>
                 <button
                     type="button"
                     onClick={onRemove}
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.tsx
index e54fc3a86c..e2ef7da449 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.tsx
@@ -99,7 +99,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
                                     themeStyles.truncate
                                 )}
                             >
-                                <Tooltip title={description || ''}>
+                                <Tooltip title={description || ''} arrow>
                                     <span className={themeStyles.toggleName}>
                                         {name}&nbsp;
                                     </span>
@@ -126,7 +126,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
                         }
                         elseShow={
                             <>
-                                <Tooltip title={description || ''}>
+                                <Tooltip title={description || ''} arrow>
                                     <span className={themeStyles.toggleName}>
                                         {name}&nbsp;{' '}
                                     </span>
@@ -196,7 +196,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
                                 !projectExists()
                             }
                             onClick={reviveFeature}
-                            tooltip="Revive feature"
+                            tooltipProps={{ title: 'Revive feature' }}
                         >
                             <Undo />
                         </PermissionIconButton>
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx
index 0bfca1dd1c..0307df0616 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx
@@ -15,6 +15,7 @@ const CreatedAt = ({ time }: ICreatedAtProps) => {
                 time,
                 locationSettings.locale
             )}`}
+            arrow
         >
             <span>{formatDateYMD(time, locationSettings.locale)}</span>
         </Tooltip>
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
index f7fdb10dd5..7844f5706d 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
@@ -54,7 +54,7 @@ const FeatureOverviewEnvironmentStrategy = ({
                         projectId={projectId}
                         component={Link}
                         to={editStrategyPath}
-                        tooltip="Edit strategy"
+                        tooltipProps={{ title: 'Edit strategy' }}
                     >
                         <Edit />
                     </PermissionIconButton>
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
index 9f6fc535e0..738e9293ce 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
@@ -48,11 +48,11 @@ const FeatureOverviewMetaData = () => {
                                         permission={UPDATE_FEATURE}
                                         component={Link}
                                         to={`/projects/${projectId}/features/${featureId}/settings`}
+                                        tooltipProps={{
+                                            title: 'Edit description',
+                                        }}
                                     >
-                                        <Edit
-                                            className={styles.editIcon}
-                                            titleAccess="Settings"
-                                        />
+                                        <Edit className={styles.editIcon} />
                                     </PermissionIconButton>
                                 </div>
                             </span>
@@ -66,7 +66,9 @@ const FeatureOverviewMetaData = () => {
                                         permission={UPDATE_FEATURE}
                                         component={Link}
                                         to={`/projects/${projectId}/features/${featureId}/settings`}
-                                        tooltip="Edit description"
+                                        tooltipProps={{
+                                            title: 'Edit description',
+                                        }}
                                     >
                                         <Edit className={styles.editIcon} />
                                     </PermissionIconButton>
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
index 72e07b3b24..8b8a32e343 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
@@ -34,7 +34,7 @@ export const FeatureSettingsInformation = ({
                     projectId={projectId}
                     data-loading
                     onClick={onEdit}
-                    tooltip="Edit"
+                    tooltipProps={{ title: 'Edit' }}
                 >
                     <Edit />
                 </PermissionIconButton>
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx
index 4144dac7d9..a33c9efaef 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx
@@ -132,7 +132,7 @@ export const OverrideConfig: VFC<IOverrideConfigProps> = ({
                             />
                         </Grid>
                         <Grid item md={1}>
-                            <Tooltip title="Remove">
+                            <Tooltip title="Remove" arrow>
                                 <IconButton
                                     onClick={event => {
                                         event.preventDefault();
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
index e28ded2b63..240e09ccbe 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
@@ -54,7 +54,7 @@ const FeatureVariantListItem = ({
                 show={
                     <TableCell className={styles.actions}>
                         <div className={styles.actionsContainer}>
-                            <Tooltip title="Edit variant">
+                            <Tooltip title="Edit variant" arrow>
                                 <IconButton
                                     data-testid={'VARIANT_EDIT_BUTTON'}
                                     onClick={() => editVariant(variant.name)}
@@ -63,7 +63,7 @@ const FeatureVariantListItem = ({
                                     <Edit />
                                 </IconButton>
                             </Tooltip>
-                            <Tooltip title="Delete variant">
+                            <Tooltip title="Delete variant" arrow>
                                 <IconButton
                                     data-testid={`VARIANT_DELETE_BUTTON_${variant.name}`}
                                     onClick={e => {
diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx
index 85cebec8e1..f2e48b9b8e 100644
--- a/frontend/src/component/feature/FeatureView/FeatureView.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx
@@ -145,14 +145,18 @@ export const FeatureView = () => {
                                     data-loading
                                     component={Link}
                                     to={`/projects/${projectId}/features/${featureId}/strategies/copy`}
-                                    tooltip="Copy feature toggle"
+                                    tooltipProps={{
+                                        title: 'Copy feature toggle',
+                                    }}
                                 >
                                     <FileCopy />
                                 </PermissionIconButton>
                                 <PermissionIconButton
                                     permission={DELETE_FEATURE}
                                     projectId={projectId}
-                                    tooltip="Archive feature toggle"
+                                    tooltipProps={{
+                                        title: 'Archive feature toggle',
+                                    }}
                                     data-loading
                                     onClick={() => setShowDelDialog(true)}
                                 >
@@ -162,7 +166,9 @@ export const FeatureView = () => {
                                     onClick={() => setOpenStaleDialog(true)}
                                     permission={UPDATE_FEATURE}
                                     projectId={projectId}
-                                    tooltip="Toggle stale status"
+                                    tooltipProps={{
+                                        title: 'Toggle stale status',
+                                    }}
                                     data-loading
                                 >
                                     <WatchLater />
@@ -171,7 +177,7 @@ export const FeatureView = () => {
                                     onClick={() => setOpenTagDialog(true)}
                                     permission={UPDATE_FEATURE}
                                     projectId={projectId}
-                                    tooltip="Add tag"
+                                    tooltipProps={{ title: 'Add tag' }}
                                     data-loading
                                 >
                                     <Label />
diff --git a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
index 8e767a59f0..fa9639cff0 100644
--- a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
+++ b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
@@ -136,6 +136,7 @@ const GeneralStrategy = ({
                                 <Tooltip
                                     title={description}
                                     placement="right-end"
+                                    arrow
                                 >
                                     <FormControlLabel
                                         label={name}
diff --git a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx
index 54e86cf8a9..706cccf0d8 100644
--- a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx
+++ b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx
@@ -73,7 +73,7 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => {
                         themeStyles.contentSpacingY
                     )}
                 >
-                    <Tooltip title="Close">
+                    <Tooltip title="Close" arrow>
                         <IconButton
                             className={styles.close}
                             onClick={() => setShowFeedback(false)}
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index cb3740008a..fb81420545 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -67,7 +67,7 @@ const Header: VFC = () => {
         return (
             <AppBar className={styles.header} position="static">
                 <Container className={styles.container}>
-                    <Tooltip title="Menu">
+                    <Tooltip title="Menu" arrow>
                         <IconButton
                             className={styles.drawerButton}
                             onClick={toggleDrawer}
@@ -137,7 +137,7 @@ const Header: VFC = () => {
                         />
                     </div>
                     <div className={styles.userContainer}>
-                        <Tooltip title="Documentation">
+                        <Tooltip title="Documentation" arrow>
                             <IconButton
                                 href="https://docs.getunleash.io/"
                                 target="_blank"
@@ -152,7 +152,7 @@ const Header: VFC = () => {
                         <ConditionallyRender
                             condition={admin}
                             show={
-                                <Tooltip title="Settings">
+                                <Tooltip title="Settings" arrow>
                                     <IconButton
                                         onClick={e =>
                                             setAdminRef(e.currentTarget)
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 25d279b55f..dc8675b2b7 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -128,7 +128,7 @@ const Project = () => {
                             onClick={() =>
                                 navigate(`/projects/${projectId}/edit`)
                             }
-                            tooltip="Edit project"
+                            tooltipProps={{ title: 'Edit project' }}
                             data-loading
                         >
                             <Edit />
diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
index 7cb0f935dd..096350b943 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
+++ b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
@@ -57,7 +57,7 @@ const ProjectInfo = ({
                 className={permissionButtonClass}
                 data-loading
                 to={`/projects/${id}/edit`}
-                tooltip="Edit description"
+                tooltipProps={{ title: 'Edit description' }}
             >
                 <Edit />
             </PermissionIconButton>
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
index 9d0225f4dd..d60ad42522 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
@@ -68,7 +68,7 @@ export const ProjectAccessListItem = ({
                     edge="end"
                     onClick={() => handleRemoveAccess(user)}
                     disabled={access.users.length === 1}
-                    tooltip="Remove access"
+                    tooltipProps={{ title: 'Remove access' }}
                 >
                     <Delete />
                 </PermissionIconButton>
diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.tsx b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
index 03e331eedc..6eefe6710b 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCard.tsx
+++ b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
@@ -2,7 +2,7 @@ import { Card, Menu, MenuItem } from '@mui/material';
 import { useStyles } from './ProjectCard.styles';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { ReactComponent as ProjectIcon } from 'assets/icons/projectIcon.svg';
-import { useState } from 'react';
+import { useState, SyntheticEvent } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
@@ -73,7 +73,7 @@ export const ProjectCard = ({
                     className={classes.actionsBtn}
                     data-loading
                     onClick={handleClick}
-                    tooltip="Options"
+                    tooltipProps={{ title: 'Options' }}
                 >
                     <MoreVertIcon />
                 </PermissionIconButton>
@@ -82,10 +82,9 @@ export const ProjectCard = ({
                     id="project-card-menu"
                     open={Boolean(anchorEl)}
                     anchorEl={anchorEl}
-                    style={{ top: '40px', left: '-60px' }}
-                    onClose={e => {
-                        // @ts-expect-error
-                        e.preventDefault();
+                    style={{ top: 0, left: -100 }}
+                    onClose={(event: SyntheticEvent) => {
+                        event.preventDefault();
                         setAnchorEl(null);
                     }}
                 >
diff --git a/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx b/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx
index b2d0592f8c..e032321517 100644
--- a/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx
+++ b/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx
@@ -66,7 +66,7 @@ export const SegmentListItem = ({
                         navigate(`/segments/edit/${id}`);
                     }}
                     permission={UPDATE_SEGMENT}
-                    tooltip="Edit segment"
+                    tooltipProps={{ title: 'Edit segment' }}
                 >
                     <Edit />
                 </PermissionIconButton>
@@ -84,7 +84,7 @@ export const SegmentListItem = ({
                         setDelDialog(true);
                     }}
                     permission={DELETE_SEGMENT}
-                    tooltip="Remove segment"
+                    tooltipProps={{ title: 'Remove segment' }}
                     data-testid={`${SEGMENT_DELETE_BTN_ID}_${name}`}
                 >
                     <Delete />
diff --git a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
index 96081e084d..86d1d95543 100644
--- a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
+++ b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
@@ -72,7 +72,7 @@ export const StrategiesList = () => {
                             data-testid={ADD_NEW_STRATEGY_ID}
                             onClick={() => navigate('/strategies/create')}
                             permission={CREATE_STRATEGY}
-                            tooltip="New strategy"
+                            tooltipProps={{ title: 'New strategy' }}
                         >
                             <Add />
                         </PermissionIconButton>
@@ -166,7 +166,7 @@ export const StrategiesList = () => {
         <PermissionIconButton
             onClick={() => onReactivateStrategy(strategy)}
             permission={UPDATE_STRATEGY}
-            tooltip="Reactivate activation strategy"
+            tooltipProps={{ title: 'Reactivate activation strategy' }}
         >
             <VisibilityOff />
         </PermissionIconButton>
@@ -176,7 +176,10 @@ export const StrategiesList = () => {
         <ConditionallyRender
             condition={strategy.name === 'default'}
             show={
-                <Tooltip title="You cannot deprecate the default strategy">
+                <Tooltip
+                    title="You cannot deprecate the default strategy"
+                    arrow
+                >
                     <div>
                         <IconButton disabled size="large">
                             <Visibility titleAccess="Deprecate strategy" />
@@ -189,7 +192,7 @@ export const StrategiesList = () => {
                     <PermissionIconButton
                         onClick={() => onDeprecateStrategy(strategy)}
                         permission={UPDATE_STRATEGY}
-                        tooltip="Deprecate strategy"
+                        tooltipProps={{ title: 'Deprecate strategy' }}
                     >
                         <Visibility />
                     </PermissionIconButton>
@@ -207,13 +210,13 @@ export const StrategiesList = () => {
                         navigate(`/strategies/${strategy?.name}/edit`)
                     }
                     permission={UPDATE_STRATEGY}
-                    tooltip="Edit strategy"
+                    tooltipProps={{ title: 'Edit strategy' }}
                 >
                     <Edit />
                 </PermissionIconButton>
             }
             elseShow={
-                <Tooltip title="You cannot delete a built-in strategy">
+                <Tooltip title="You cannot delete a built-in strategy" arrow>
                     <div>
                         <IconButton disabled size="large">
                             <Edit titleAccess="Edit strategy" />
@@ -231,13 +234,13 @@ export const StrategiesList = () => {
                 <PermissionIconButton
                     onClick={() => onDeleteStrategy(strategy)}
                     permission={DELETE_STRATEGY}
-                    tooltip="Delete strategy"
+                    tooltipProps={{ title: 'Delete strategy' }}
                 >
                     <Delete />
                 </PermissionIconButton>
             }
             elseShow={
-                <Tooltip title="You cannot delete a built-in strategy">
+                <Tooltip title="You cannot delete a built-in strategy" arrow>
                     <div>
                         <IconButton disabled size="large">
                             <Delete titleAccess="Delete strategy" />
diff --git a/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap b/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap
index cf5d71d06b..d115ad3c4e 100644
--- a/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap
+++ b/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap
@@ -117,55 +117,44 @@ exports[`renders correctly 1`] = `
               </p>
             </div>
             <div>
-              <span
+              <button
                 aria-label="Deprecate strategy"
                 aria-labelledby={null}
-                className=""
+                className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
                 data-mui-internal-clone-element={true}
-                id="useId-1"
+                disabled={false}
                 onBlur={[Function]}
+                onClick={[Function]}
+                onContextMenu={[Function]}
+                onDragLeave={[Function]}
                 onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
                 onMouseLeave={[Function]}
                 onMouseOver={[Function]}
+                onMouseUp={[Function]}
                 onTouchEnd={[Function]}
+                onTouchMove={[Function]}
                 onTouchStart={[Function]}
+                tabIndex={0}
+                type="button"
               >
-                <button
-                  aria-labelledby="useId-1"
-                  className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
-                  disabled={false}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onContextMenu={[Function]}
-                  onDragLeave={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchMove={[Function]}
-                  onTouchStart={[Function]}
-                  tabIndex={0}
-                  type="button"
+                <svg
+                  aria-hidden={true}
+                  className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
+                  data-testid="VisibilityIcon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
                 >
-                  <svg
-                    aria-hidden={true}
-                    className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
-                    data-testid="VisibilityIcon"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
-                    />
-                  </svg>
-                  <span
-                    className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
+                  <path
+                    d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
                   />
-                </button>
-              </span>
+                </svg>
+                <span
+                  className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
+                />
+              </button>
             </div>
             <div
               aria-label="You cannot delete a built-in strategy"
diff --git a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
index 808de26ba6..1f839d253a 100644
--- a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
+++ b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
@@ -88,7 +88,7 @@ export const StrategyParameter = ({
                     error={Boolean(errors?.[`paramName${index}`])}
                     errorText={errors?.[`paramName${index}`]}
                 />
-                <Tooltip title="Remove parameter">
+                <Tooltip title="Remove parameter" arrow>
                     <IconButton
                         onClick={() => {
                             setParams(params.filter((e, i) => i !== index));
diff --git a/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx b/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
index f1ffe72421..be6bc80b2d 100644
--- a/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
+++ b/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
@@ -35,14 +35,14 @@ export const StrategyDetails = ({
                         condition={required}
                         show={
                             <ListItemAvatar>
-                                <Tooltip title="Required parameter">
+                                <Tooltip title="Required parameter" arrow>
                                     <Add aria-hidden={false} />
                                 </Tooltip>
                             </ListItemAvatar>
                         }
                         elseShow={
                             <ListItemAvatar>
-                                <Tooltip title="Optional parameter">
+                                <Tooltip title="Optional parameter" arrow>
                                     <RadioButtonChecked aria-hidden={false} />
                                 </Tooltip>
                             </ListItemAvatar>
diff --git a/frontend/src/component/strategies/StrategyView/StrategyView.tsx b/frontend/src/component/strategies/StrategyView/StrategyView.tsx
index d1b3d2cb29..e7c8c76099 100644
--- a/frontend/src/component/strategies/StrategyView/StrategyView.tsx
+++ b/frontend/src/component/strategies/StrategyView/StrategyView.tsx
@@ -44,7 +44,7 @@ export const StrategyView = () => {
                                     permission={UPDATE_STRATEGY}
                                     data-loading
                                     onClick={handleEdit}
-                                    tooltip="Edit strategy"
+                                    tooltipProps={{ title: 'Edit strategy' }}
                                 >
                                     <Edit />
                                 </PermissionIconButton>
diff --git a/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx b/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
index e1f1acb859..263d23b9c2 100644
--- a/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
+++ b/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
@@ -25,12 +25,12 @@ export const TogglesLinkList = ({ toggles }: ITogglesLinkListProps) => (
                         <ConditionallyRender
                             condition={Boolean(enabled)}
                             show={
-                                <Tooltip title="Enabled">
+                                <Tooltip title="Enabled" arrow>
                                     <PlayArrow aria-hidden={false} />
                                 </Tooltip>
                             }
                             elseShow={
-                                <Tooltip title="Disabled">
+                                <Tooltip title="Disabled" arrow>
                                     <Pause aria-hidden={false} />
                                 </Tooltip>
                             }
diff --git a/frontend/src/component/tags/TagTypeList/TagTypeList.tsx b/frontend/src/component/tags/TagTypeList/TagTypeList.tsx
index 385367c516..70c890bc36 100644
--- a/frontend/src/component/tags/TagTypeList/TagTypeList.tsx
+++ b/frontend/src/component/tags/TagTypeList/TagTypeList.tsx
@@ -27,6 +27,7 @@ import useToast from 'hooks/useToast';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { ITagType } from 'interfaces/tags';
+import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
 
 export const TagTypeList = () => {
     const { hasAccess } = useContext(AccessContext);
@@ -67,7 +68,7 @@ export const TagTypeList = () => {
                         <ConditionallyRender
                             condition={smallScreen}
                             show={
-                                <Tooltip title="Add tag type">
+                                <Tooltip title="Add tag type" arrow>
                                     <IconButton
                                         onClick={() =>
                                             navigate('/tag-types/create')
@@ -103,7 +104,7 @@ export const TagTypeList = () => {
             </Link>
         );
         let deleteButton = (
-            <Tooltip title={`Delete ${tagType.name}`}>
+            <Tooltip title={`Delete ${tagType.name}`} arrow>
                 <IconButton
                     onClick={() =>
                         setDeletion({
@@ -130,7 +131,7 @@ export const TagTypeList = () => {
                 <PermissionIconButton
                     permission={UPDATE_TAG_TYPE}
                     component={Link}
-                    tooltip="Edit tag type"
+                    tooltipProps={{ title: 'Edit tag type' }}
                     to={`/tag-types/edit/${tagType.name}`}
                 >
                     <Edit className={styles.icon} />