refactor: improve tooltip styles after MUI update (#966)

* refactor: add missing event arg type * refactor: fix project card popup position * refactor: add tooltip arrows * refactor: update snapshot * refactor: add missing tooltips * refactor: use a custom Autocomplete size in AutocompleteBox
2025-10-27 11:02:16 +01:00 · 2022-05-09 15:17:20 +02:00 · 2022-05-09 15:17:20 +02:00 · 9902494f58
commit 9902494f58
parent 44c579f7a8
42 changed files with 157 additions and 141 deletions
--- 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);
--- 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);
--- 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>
--- 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>
--- 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>
--- 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}
                            >
--- 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,
--- 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' }}
--- 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={() => (
+                        <Tooltip title="Edit constraint" arrow>
                            <IconButton type="button" onClick={onEditClick}>
-                            <Edit titleAccess="Edit constraint" />
+                                <Edit />
                            </IconButton>
+                        </Tooltip>
                    )}
                />
                <ConditionallyRender
                    condition={Boolean(onDeleteClick)}
                    show={() => (
+                        <Tooltip title="Delete constraint" arrow>
                            <IconButton type="button" onClick={onDeleteClick}>
-                            <Delete titleAccess="Delete constraint" />
+                                <Delete />
                            </IconButton>
+                        </Tooltip>
                    )}
                />
            </div>
--- 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)}
--- 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}
--- 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"
+        <TooltipResolver
+            {...tooltipProps}
+            title={formatAccessText(access, tooltipProps?.title)}
+            arrow
        >
+            <IconButton {...rest} disabled={!access} size="large">
                {children}
            </IconButton>
-            </span>
        </TooltipResolver>
    );
 };
--- 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}
--- 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>
    );
--- 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"
--- 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={() => {
--- 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}
--- 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 />
--- 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}
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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();
--- 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 => {
--- 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 />
--- 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}
--- 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)}
--- 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)
--- 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 />
--- 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>
--- 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>
--- 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);
                    }}
                >
--- 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 />
--- 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" />
--- a/frontend/src/component/strategies/StrategiesList/snapshots/StrategiesList.test.tsx.snap
+++ b/frontend/src/component/strategies/StrategiesList/snapshots/StrategiesList.test.tsx.snap
@ -117,22 +117,11 @@ exports[`renders correctly 1`] = `
              </p>
            </div>
            <div>
-              <span
+              <button
                aria-label="Deprecate strategy"
                aria-labelledby={null}
-                className=""
-                data-mui-internal-clone-element={true}
-                id="useId-1"
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseLeave={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
-              >
-                <button
-                  aria-labelledby="useId-1"
                className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                data-mui-internal-clone-element={true}
                disabled={false}
                onBlur={[Function]}
                onClick={[Function]}
@ -143,6 +132,7 @@ exports[`renders correctly 1`] = `
                onKeyUp={[Function]}
                onMouseDown={[Function]}
                onMouseLeave={[Function]}
+                onMouseOver={[Function]}
                onMouseUp={[Function]}
                onTouchEnd={[Function]}
                onTouchMove={[Function]}
@ -165,7 +155,6 @@ exports[`renders correctly 1`] = `
                  className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
                />
              </button>
-              </span>
            </div>
            <div
              aria-label="You cannot delete a built-in strategy"
--- 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));
--- 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>
--- 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>
--- 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>
                            }
--- 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} />