Prevent tooltip on disabled button warning

src/modules/core/components/AppbarSearch.tsx

@@ -9,11 +9,11 @@
 import React, { useState, useEffect } from 'react';
 import SearchIcon from '@mui/icons-material/Search';
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { SearchTextField } from '@/modules/core/components/inputs/SearchTextField.tsx';
 
 interface IProps {
@@ -124,10 +124,10 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
     }
 
     return (
-        <Tooltip title={t('search.title.search')}>
+        <CustomTooltip title={t('search.title.search')}>
             <IconButton onClick={() => updateSearchOpenState(true)} color="inherit">
                 <SearchIcon />
             </IconButton>
-        </Tooltip>
+        </CustomTooltip>
     );
 };

src/modules/core/components/CustomTooltip.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
+
+export const CustomTooltip = ({
+    children,
+    disabled = false,
+    title,
+    ...props
+}: TooltipProps & { disabled?: boolean }) => (
+    <Tooltip {...props} title={disabled ? '' : title}>
+        {children}
+    </Tooltip>
+);

src/modules/core/components/GridLayouts.tsx

@@ -11,10 +11,10 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
-import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import { useTranslation } from 'react-i18next';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 
 import { GridLayout } from '@/modules/core/Core.types.ts';
 
@@ -43,7 +43,7 @@ export function GridLayouts({
 
     return (
         <>
-            <Tooltip title={t('global.label.display')}>
+            <CustomTooltip title={t('global.label.display')}>
                 <IconButton
                     onClick={handleClick}
                     size="small"
@@ -55,7 +55,7 @@ export function GridLayouts({
                 >
                     <ViewModuleIcon />
                 </IconButton>
-            </Tooltip>
+            </CustomTooltip>
             <Menu
                 id="basic-menu"
                 anchorEl={anchorEl}

src/modules/core/components/UpdateChecker.tsx

@@ -10,12 +10,12 @@ import { useEffect, useMemo, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { useTranslation } from 'react-i18next';
-import Tooltip from '@mui/material/Tooltip';
 import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import ClearIcon from '@mui/icons-material/Clear';
 import Stack from '@mui/material/Stack';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { UpdaterSubscription } from '@/lib/graphql/generated/graphql.ts';
@@ -118,7 +118,7 @@ export function UpdateChecker({
         <PopupState variant="popover" popupId="library-update-checker-menu">
             {(popupState) => (
                 <>
-                    <Tooltip
+                    <CustomTooltip
                         title={
                             isRunning
                                 ? t('library.action.label.stop_update')
@@ -151,7 +151,7 @@ export function UpdateChecker({
                                 </>
                             )}
                         </IconButton>
-                    </Tooltip>
+                    </CustomTooltip>
                     <Menu {...bindMenu(popupState)}>
                         <MenuItem
                             onClick={() => {

src/modules/core/components/buttons/ButtonSelect.tsx

@@ -9,7 +9,7 @@
 import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
 import { Superscript } from '@/modules/core/components/Superscript.tsx';
 
@@ -39,7 +39,7 @@ export const ButtonSelect = <Value extends string | number>({
                     : t(valueToDisplayData[displayValue].title);
 
                 return (
-                    <Tooltip key={displayValue} title={isDefault ? t('reader.settings.active_setting') : ''}>
+                    <CustomTooltip key={displayValue} title={isDefault ? t('reader.settings.active_setting') : ''}>
                         <Button
                             onClick={() => setValue(displayValue)}
                             variant={displayValue === value ? 'contained' : 'outlined'}
@@ -47,7 +47,7 @@ export const ButtonSelect = <Value extends string | number>({
                         >
                             {isDefault ? <Superscript i18nKey="global.label.footnote" value={text} /> : text}
                         </Button>
-                    </Tooltip>
+                    </CustomTooltip>
                 );
             })}
         </Stack>

src/modules/core/components/buttons/ResetButton.tsx

@@ -9,8 +9,8 @@
 import Button, { ButtonProps } from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
-import Tooltip from '@mui/material/Tooltip';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 
 type PropsIconButton = { asIconButton: true } & IconButtonProps;
 type PropsButton = { asIconButton?: false } & ButtonProps;
@@ -21,11 +21,11 @@ export const ResetButton = ({ asIconButton, ...props }: Props) => {
 
     if (asIconButton) {
         return (
-            <Tooltip title={t('global.button.reset')}>
+            <CustomTooltip title={t('global.button.reset')}>
                 <IconButton color="inherit" {...props}>
                     <RestartAltIcon />
                 </IconButton>
-            </Tooltip>
+            </CustomTooltip>
         );
     }
 

src/modules/core/components/buttons/ValueRotationButton.tsx

@@ -9,7 +9,7 @@
 import { useTranslation } from 'react-i18next';
 import { ReactNode, useMemo } from 'react';
 import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
 import { getNextRotationValue } from '@/modules/core/utils/ValueRotationButton.utils.ts';
 import { Superscript } from '@/modules/core/components/Superscript.tsx';
@@ -37,7 +37,7 @@ export const ValueRotationButton = <Value extends string | number>({
     }, [value, values]);
 
     return (
-        <Tooltip title={tooltip}>
+        <CustomTooltip title={tooltip}>
             {isDefault ? (
                 <Button
                     onClick={() => setValue(values[0])}
@@ -81,6 +81,6 @@ export const ValueRotationButton = <Value extends string | number>({
                         : t(valueToDisplayData[value].title)}
                 </Button>
             )}
-        </Tooltip>
+        </CustomTooltip>
     );
 };

src/modules/core/components/inputs/LangSelect.tsx

@@ -17,9 +17,9 @@ import IconButton from '@mui/material/IconButton';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import List from '@mui/material/List';
 import ListItemText from '@mui/material/ListItemText';
-import Tooltip from '@mui/material/Tooltip';
 import ListItem from '@mui/material/ListItem';
 import { useTranslation } from 'react-i18next';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { cloneObject } from '@/util/cloneObject.tsx';
 import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
 
@@ -72,7 +72,7 @@ export function LangSelect(props: IProps) {
 
     return (
         <>
-            <Tooltip title={t('settings.title')}>
+            <CustomTooltip title={t('settings.title')}>
                 <IconButton
                     onClick={() => setOpen(true)}
                     aria-label="display more actions"
@@ -82,7 +82,7 @@ export function LangSelect(props: IProps) {
                 >
                     <FilterListIcon />
                 </IconButton>
-            </Tooltip>
+            </CustomTooltip>
             <Dialog
                 sx={{
                     '.MuiDialog-paper': {

src/modules/core/components/settings/MutableListSetting.tsx

@@ -13,7 +13,6 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
 import DialogContent from '@mui/material/DialogContent';
@@ -24,6 +23,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import DialogContentText from '@mui/material/DialogContentText';
 import InfoIcon from '@mui/icons-material/Info';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { TextSetting, TextSettingProps } from '@/modules/core/components/settings/text/TextSetting.tsx';
 import { TextSettingDialog } from '@/modules/core/components/settings/text/TextSettingDialog.tsx';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
@@ -49,11 +49,11 @@ const MutableListItem = ({
                     <ListItemText secondary={textSettingProps.value} />
                 </ListItem>
             )}
-            <Tooltip title={t('chapter.action.download.delete.label.action')}>
+            <CustomTooltip title={t('chapter.action.download.delete.label.action')} disabled={!deletable}>
                 <IconButton disabled={!deletable} size="large" onClick={handleDelete}>
                     <DeleteIcon />
                 </IconButton>
-            </Tooltip>
+            </CustomTooltip>
         </Stack>
     );
 };