Prevent tooltip on disabled button warning

src/modules/category/components/CategorySettingsCard.tsx

@@ -7,7 +7,6 @@
  */
 
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import { DraggableProvided } from 'react-beautiful-dnd';
 import DragHandleIcon from '@mui/icons-material/DragHandle';
 import EditIcon from '@mui/icons-material/Edit';
@@ -18,6 +17,7 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { CategoryType } from '@/lib/graphql/generated/graphql.ts';
 
@@ -56,16 +56,16 @@ export const CategorySettingsCard = ({
                         {category.name}
                     </Typography>
                     <Stack sx={{ flexDirection: 'row' }}>
-                        <Tooltip title={t('global.button.edit')}>
+                        <CustomTooltip title={t('global.button.edit')}>
                             <IconButton component={Box} onClick={onEdit} size="large">
                                 <EditIcon />
                             </IconButton>
-                        </Tooltip>
+                        </CustomTooltip>
-                        <Tooltip title={t('chapter.action.download.delete.label.action')}>
+                        <CustomTooltip title={t('chapter.action.download.delete.label.action')}>
                             <IconButton component={Box} onClick={deleteCategory} size="large">
                                 <DeleteIcon />
                             </IconButton>
-                        </Tooltip>
+                        </CustomTooltip>
                     </Stack>
                 </CardContent>
             </Card>

src/modules/chapter/components/ChapterList.tsx

@@ -8,7 +8,6 @@
 
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import { ComponentProps, useCallback, useMemo, useState } from 'react';
@@ -19,6 +18,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
 import Menu from '@mui/material/Menu';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { ChapterCard } from '@/modules/chapter/components/cards/ChapterCard.tsx';
 import { ResumeFab } from '@/modules/manga/components/ResumeFAB.tsx';
@@ -186,7 +186,10 @@ export const ChapterList = ({
                     </Typography>
 
                     <Stack direction="row">
-                        <Tooltip title={t('chapter.action.mark_as_read.add.label.action.current')}>
+                        <CustomTooltip
+                            title={t('chapter.action.mark_as_read.add.label.action.current')}
+                            disabled={areAllChaptersRead}
+                        >
                             <IconButton
                                 disabled={areAllChaptersRead}
                                 onClick={() => Chapters.markAsRead(Chapters.getNonRead(chapters), true, manga.id)}
@@ -194,11 +197,14 @@ export const ChapterList = ({
                             >
                                 <DoneAllIcon />
                             </IconButton>
-                        </Tooltip>
+                        </CustomTooltip>
                         <PopupState variant="popover" popupId="chapterlist-download-button">
                             {(popupState) => (
                                 <>
-                                    <Tooltip title={t('chapter.action.download.add.label.action')}>
+                                    <CustomTooltip
+                                        title={t('chapter.action.download.add.label.action')}
+                                        disabled={areAllChaptersRead}
+                                    >
                                         <IconButton
                                             disabled={areAllChaptersDownloaded}
                                             {...bindTrigger(popupState)}
@@ -206,7 +212,7 @@ export const ChapterList = ({
                                         >
                                             <DownloadIcon />
                                         </IconButton>
-                                    </Tooltip>
+                                    </CustomTooltip>
                                     {popupState.isOpen && (
                                         <Menu {...bindMenu(popupState)}>
                                             <ChaptersDownloadActionMenuItems

src/modules/chapter/components/ChaptersToolbarMenu.tsx

@@ -8,9 +8,9 @@
 
 import FilterList from '@mui/icons-material/FilterList';
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { ChapterOptions } from '@/modules/chapter/components/ChapterOptions.tsx';
 import { isFilterActive } from '@/modules/chapter/utils/ChapterList.util.tsx';
 import { ChapterListOptions, ChapterOptionsReducerAction } from '@/modules/chapter/Chapter.types.ts';
@@ -28,11 +28,11 @@ export const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
 
     return (
         <>
-            <Tooltip title={t('settings.title')}>
+            <CustomTooltip title={t('settings.title')}>
                 <IconButton onClick={() => setOpen(true)} color="inherit">
                     <FilterList color={isFiltered ? 'warning' : undefined} />
                 </IconButton>
-            </Tooltip>
+            </CustomTooltip>
             <ChapterOptions
                 open={open}
                 onClose={() => setOpen(false)}

src/modules/chapter/components/cards/ChapterCard.tsx

@@ -11,7 +11,6 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
 import CardActionArea from '@mui/material/CardActionArea';
 import Checkbox from '@mui/material/Checkbox';
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
@@ -22,6 +21,7 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
 import { useLongPress } from 'use-long-press';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { getDateString } from '@/util/DateHelper.ts';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
 import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
@@ -204,7 +204,7 @@ export const ChapterCard = memo((props: IProps) => {
 
                                 <Stack sx={{ minHeight: '48px' }}>
                                     {selected === null ? (
-                                        <Tooltip title={t('global.button.options')}>
+                                        <CustomTooltip title={t('global.button.options')}>
                                             <IconButton
                                                 ref={menuButtonRef}
                                                 {...bindTrigger(popupState)}
@@ -220,13 +220,13 @@ export const ChapterCard = memo((props: IProps) => {
                                             >
                                                 <MoreVertIcon />
                                             </IconButton>
-                                        </Tooltip>
+                                        </CustomTooltip>
                                     ) : (
-                                        <Tooltip
+                                        <CustomTooltip
                                             title={t(selected ? 'global.button.deselect' : 'global.button.select')}
                                         >
                                             <Checkbox checked={selected} />
-                                        </Tooltip>
+                                        </CustomTooltip>
                                     )}
                                 </Stack>
                             </CardContent>

src/modules/collection/components/SelectableCollectionSelectAll.tsx

@@ -6,9 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Tooltip from '@mui/material/Tooltip';
 import Checkbox from '@mui/material/Checkbox';
 import { useTranslation } from 'react-i18next';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 
 export const SelectableCollectionSelectAll = ({
     areAllItemsSelected,
@@ -22,7 +22,7 @@ export const SelectableCollectionSelectAll = ({
     const { t } = useTranslation();
 
     return (
-        <Tooltip title={t(!areAllItemsSelected ? 'global.button.select_all' : 'global.button.clear')}>
+        <CustomTooltip title={t(!areAllItemsSelected ? 'global.button.select_all' : 'global.button.clear')}>
             <Checkbox
                 sx={{
                     padding: '8px',
@@ -35,6 +35,6 @@ export const SelectableCollectionSelectAll = ({
                 indeterminate={!areNoItemsSelected && !areAllItemsSelected}
                 onChange={(_, checked) => onChange(checked)}
             />
-        </Tooltip>
+        </CustomTooltip>
     );
 };

src/modules/collection/components/SelectableCollectionSelectMode.tsx

@@ -6,10 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Tooltip from '@mui/material/Tooltip';
 import Checkbox from '@mui/material/Checkbox';
 import { useTranslation } from 'react-i18next';
 import ClearIcon from '@mui/icons-material/Clear';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { SelectableCollectionSelectAll } from '@/modules/collection/components/SelectableCollectionSelectAll.tsx';
 
 export const SelectableCollectionSelectMode = ({
@@ -36,7 +36,7 @@ export const SelectableCollectionSelectMode = ({
                     onChange={onSelectAll}
                 />
             )}
-            <Tooltip title={t(!isActive ? 'global.button.select_all' : 'global.button.cancel')}>
+            <CustomTooltip title={t(!isActive ? 'global.button.select_all' : 'global.button.cancel')}>
                 <Checkbox
                     checkedIcon={<ClearIcon />}
                     sx={{
@@ -49,7 +49,7 @@ export const SelectableCollectionSelectMode = ({
                     checked={isActive}
                     onChange={(_, checked) => onModeChange(checked)}
                 />
-            </Tooltip>
+            </CustomTooltip>
         </>
     );
 };

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>
     );
 };

src/modules/downloads/screens/DownloadQueue.tsx

@@ -14,7 +14,6 @@ import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Stack from '@mui/material/Stack';
 import Box, { BoxProps } from '@mui/material/Box';
-import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
 import React, { memo, useCallback, useEffect, useLayoutEffect } from 'react';
 import { DragDropContext, Draggable, DraggableProvided, DropResult } from 'react-beautiful-dnd';
@@ -25,6 +24,7 @@ import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
 import { Virtuoso } from 'react-virtuoso';
 import CardContent from '@mui/material/CardContent';
 import Refresh from '@mui/icons-material/Refresh';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { StrictModeDroppable } from '@/modules/core/components/StrictModeDroppable.tsx';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
@@ -93,7 +93,7 @@ const DownloadChapterItem = memo(
                             </Stack>
                             <DownloadStateIndicator chapterId={item.chapter.id} />
                             {item.state === DownloadState.Error && (
-                                <Tooltip title={t('global.button.retry')}>
+                                <CustomTooltip title={t('global.button.retry')}>
                                     <IconButton
                                         onClick={(e) => {
                                             e.preventDefault();
@@ -104,9 +104,9 @@ const DownloadChapterItem = memo(
                                     >
                                         <Refresh />
                                     </IconButton>
-                                </Tooltip>
+                                </CustomTooltip>
                             )}
-                            <Tooltip title={t('chapter.action.download.delete.label.action')}>
+                            <CustomTooltip title={t('chapter.action.download.delete.label.action')}>
                                 <IconButton
                                     onClick={(e) => {
                                         e.preventDefault();
@@ -117,7 +117,7 @@ const DownloadChapterItem = memo(
                                 >
                                     <DeleteIcon />
                                 </IconButton>
-                            </Tooltip>
+                            </CustomTooltip>
                         </CardContent>
                     </CardActionArea>
                 </Card>
@@ -165,17 +165,20 @@ export const DownloadQueue: React.FC = () => {
         setTitle(t('download.queue.title'));
         setAction(
             <>
-                <Tooltip title={t('download.queue.label.delete_all')}>
+                <CustomTooltip title={t('download.queue.label.delete_all')}>
                     <IconButton onClick={clearQueue} size="large" color="inherit">
                         <DeleteSweepIcon />
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
 
-                <Tooltip title={t(status === DownloaderState.Started ? 'global.button.start' : 'global.button.stop')}>
+                <CustomTooltip
+                    title={t(status === DownloaderState.Started ? 'global.button.start' : 'global.button.stop')}
+                    disabled={isQueueEmpty}
+                >
                     <IconButton onClick={toggleQueueStatus} size="large" disabled={isQueueEmpty} color="inherit">
                         {status === DownloaderState.Stopped ? <PlayArrowIcon /> : <PauseIcon />}
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
             </>,
         );
 

src/modules/extension/screens/Extensions.tsx

@@ -13,10 +13,10 @@ import AddIcon from '@mui/icons-material/Add';
 import { StringParam, useQueryParam } from 'use-query-params';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { extensionDefaultLangs } from '@/modules/core/utils/Languages.ts';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
@@ -134,11 +134,11 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
         setAction(
             <>
                 <AppbarSearch />
-                <Tooltip title={t('extension.action.label.install_external')}>
+                <CustomTooltip title={t('extension.action.label.install_external')}>
                     <IconButton onClick={() => inputRef.current?.click()} size="large" color="inherit">
                         <AddIcon />
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
 
                 <LangSelect shownLangs={shownLangs} setShownLangs={setShownLangs} allLangs={allLangs} />
             </>,

src/modules/library/components/LibraryToolbarMenu.tsx

@@ -8,9 +8,9 @@
 
 import FilterList from '@mui/icons-material/FilterList';
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import { ComponentProps, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { LibraryOptionsPanel } from '@/modules/library/components/LibraryOptionsPanel.tsx';
 import { useLibraryOptionsContext } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
 
@@ -34,11 +34,11 @@ export const LibraryToolbarMenu = ({
 
     return (
         <>
-            <Tooltip title={t('settings.title')}>
+            <CustomTooltip title={t('settings.title')}>
                 <IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'inherit'}>
                     <FilterList />
                 </IconButton>
-            </Tooltip>
+            </CustomTooltip>
             <LibraryOptionsPanel category={category} open={open} onClose={() => setOpen(false)} />
         </>
     );

src/modules/manga/components/ContinueReadingButton.tsx

@@ -8,9 +8,9 @@
 
 import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import { Link } from 'react-router-dom';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { ChapterReadInfo, Chapters, ChapterSourceOrderInfo } from '@/modules/chapter/services/Chapters.ts';
 
 export const ContinueReadingButton = ({
@@ -32,7 +32,7 @@ export const ContinueReadingButton = ({
     const isFirstChapter = sourceOrder === 1;
 
     return (
-        <Tooltip title={t(isFirstChapter ? 'global.button.start' : 'global.button.resume')}>
+        <CustomTooltip title={t(isFirstChapter ? 'global.button.start' : 'global.button.resume')}>
             <Button
                 variant="contained"
                 size="small"
@@ -45,6 +45,6 @@ export const ContinueReadingButton = ({
             >
                 <PlayArrowIcon />
             </Button>
-        </Tooltip>
+        </CustomTooltip>
     );
 };

src/modules/manga/components/MangaDetails.tsx

@@ -15,7 +15,6 @@ import { t as translate } from 'i18next';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
 import Chip from '@mui/material/Chip';
-import Tooltip from '@mui/material/Tooltip';
 import LaunchIcon from '@mui/icons-material/Launch';
 import Collapse from '@mui/material/Collapse';
 import Stack from '@mui/material/Stack';
@@ -28,6 +27,7 @@ import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { Vibrant } from 'node-vibrant/browser';
 import { FastAverageColor } from 'fast-average-color';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { Mangas } from '@/modules/manga/services/Mangas.ts';
 import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
@@ -129,7 +129,7 @@ const OpenSourceButton = ({ url }: { url?: string | null }) => {
     const { t } = useTranslation();
 
     return (
-        <Tooltip title={t('global.button.open_site')}>
+        <CustomTooltip title={t('global.button.open_site')} disabled={!url}>
             <CustomIconButton
                 size="medium"
                 disabled={!url}
@@ -141,7 +141,7 @@ const OpenSourceButton = ({ url }: { url?: string | null }) => {
             >
                 <LaunchIcon />
             </CustomIconButton>
-        </Tooltip>
+        </CustomTooltip>
     );
 };
 
@@ -391,11 +391,11 @@ export const MangaDetails = ({
                                 <Typography variant="h5" component="h2" sx={{ wordBreak: 'break-word' }}>
                                     {manga.title}
                                 </Typography>
-                                <Tooltip title={t('global.button.copy')}>
+                                <CustomTooltip title={t('global.button.copy')}>
                                     <IconButton onClick={copyTitle} color="inherit">
                                         <ContentCopyIcon fontSize="small" />
                                     </IconButton>
-                                </Tooltip>
+                                </CustomTooltip>
                             </Stack>
                             <Metadata title={t('manga.label.author')} value={getValueOrUnknown(manga.author)} />
                             <Metadata title={t('manga.label.artist')} value={getValueOrUnknown(manga.artist)} />

src/modules/manga/components/MangaOptionButton.tsx

@@ -9,12 +9,12 @@
 import { useTranslation } from 'react-i18next';
 import { BaseSyntheticEvent, MouseEvent, TouchEvent, ChangeEvent, useMemo, forwardRef, ForwardedRef } from 'react';
 import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
 import Checkbox from '@mui/material/Checkbox';
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { PopupState } from 'material-ui-popup-state/hooks';
 import { bindTrigger } from 'material-ui-popup-state';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { SelectableCollectionReturnType } from '@/modules/collection/hooks/useSelectableCollection.ts';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
 import { MangaType } from '@/lib/graphql/generated/graphql.ts';
@@ -71,15 +71,15 @@ export const MangaOptionButton = forwardRef(
             }
 
             return (
-                <Tooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
+                <CustomTooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
                     <Checkbox checked={selected} onMouseDown={preventDefaultAction} onChange={handleSelectionChange} />
-                </Tooltip>
+                </CustomTooltip>
             );
         }
 
         if (asCheckbox) {
             return (
-                <Tooltip title={t('global.button.options')}>
+                <CustomTooltip title={t('global.button.options')}>
                     <IconButton
                         ref={ref}
                         {...bindTriggerProps}
@@ -90,12 +90,12 @@ export const MangaOptionButton = forwardRef(
                     >
                         <MoreVertIcon />
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
             );
         }
 
         return (
-            <Tooltip title={t('global.button.options')}>
+            <CustomTooltip title={t('global.button.options')}>
                 <Button
                     ref={ref}
                     {...bindTriggerProps}
@@ -118,7 +118,7 @@ export const MangaOptionButton = forwardRef(
                 >
                     <MoreVertIcon />
                 </Button>
-            </Tooltip>
+            </CustomTooltip>
         );
     },
 );

src/modules/manga/components/MangaToolbarMenu.tsx

@@ -14,13 +14,13 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { useCategorySelect } from '@/modules/category/hooks/useCategorySelect.tsx';
 import { MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
@@ -51,7 +51,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
         <>
             {isLargeScreen && (
                 <>
-                    <Tooltip title={t('manga.label.reload_from_source')}>
+                    <CustomTooltip title={t('manga.label.reload_from_source')} disabled={refreshing}>
                         <IconButton
                             onClick={() => {
                                 onRefresh();
@@ -61,10 +61,10 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                         >
                             <Refresh />
                         </IconButton>
-                    </Tooltip>
+                    </CustomTooltip>
                     {manga.inLibrary && (
                         <>
-                            <Tooltip title={t('global.button.migrate')}>
+                            <CustomTooltip title={t('global.button.migrate')}>
                                 <Link
                                     to={`${AppRoutes.migrate.childRoutes.search.path(manga.sourceId, manga.id)}?query=${manga.title}`}
                                     state={{ mangaTitle: manga.title }}
@@ -74,8 +74,8 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                                         <SyncAltIcon />
                                     </IconButton>
                                 </Link>
-                            </Tooltip>
+                            </CustomTooltip>
-                            <Tooltip title={t('manga.label.edit_categories')}>
+                            <CustomTooltip title={t('manga.label.edit_categories')}>
                                 <IconButton
                                     onClick={() => {
                                         openCategorySelect(true);
@@ -84,7 +84,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                                 >
                                     <Label />
                                 </IconButton>
-                            </Tooltip>
+                            </CustomTooltip>
                         </>
                     )}
                 </>

src/modules/manga/components/cards/MangaGridCard.tsx

@@ -12,9 +12,9 @@ import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import { memo, useRef } from 'react';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 import { MangaOptionButton } from '@/modules/manga/components/MangaOptionButton.tsx';
 import { Mangas } from '@/modules/manga/services/Mangas.ts';
@@ -166,7 +166,7 @@ export const MangaGridCard = memo(
                                     }}
                                 >
                                     {gridLayout !== GridLayout.Comfortable && (
-                                        <Tooltip title={title} placement="top">
+                                        <CustomTooltip title={title} placement="top">
                                             <TypographyMaxLines
                                                 component="h3"
                                                 sx={{
@@ -176,7 +176,7 @@ export const MangaGridCard = memo(
                                             >
                                                 {title}
                                             </TypographyMaxLines>
-                                        </Tooltip>
+                                        </CustomTooltip>
                                     )}
                                     {continueReadingButton}
                                 </Stack>
@@ -185,7 +185,7 @@ export const MangaGridCard = memo(
                     </Card>
                     {gridLayout === GridLayout.Comfortable && (
                         <Stack sx={{ pb: 1 }}>
-                            <Tooltip title={title} placement="top">
+                            <CustomTooltip title={title} placement="top">
                                 <TypographyMaxLines
                                     component="h3"
                                     sx={{
@@ -197,7 +197,7 @@ export const MangaGridCard = memo(
                                 >
                                     {title}
                                 </TypographyMaxLines>
-                            </Tooltip>
+                            </CustomTooltip>
                         </Stack>
                     )}
                 </Box>

src/modules/manga/components/cards/MangaListCard.tsx

@@ -12,9 +12,9 @@ import CardActionArea from '@mui/material/CardActionArea';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import { Link as RouterLink } from 'react-router-dom';
 import { memo, useRef } from 'react';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 import { SpecificMangaCardProps } from '@/modules/manga/Manga.types.ts';
@@ -103,11 +103,11 @@ export const MangaListCard = memo(
                                 width: 'min-content',
                             }}
                         >
-                            <Tooltip title={title} placement="top">
+                            <CustomTooltip title={title} placement="top">
                                 <TypographyMaxLines variant="h6" component="h3">
                                     {title}
                                 </TypographyMaxLines>
-                            </Tooltip>
+                            </CustomTooltip>
                         </Box>
                         <Stack
                             direction="row"

src/modules/manga/screens/Manga.tsx

@@ -10,12 +10,12 @@ import Warning from '@mui/icons-material/Warning';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
 import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { isNetworkRequestInFlight } from '@apollo/client/core/networkStatus';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { ChapterList } from '@/modules/chapter/components/ChapterList.tsx';
 import { useRefreshManga } from '@/modules/manga/hooks/useRefreshManga.ts';
@@ -78,7 +78,7 @@ export const Manga: React.FC = () => {
                 }}
             >
                 {error && !isValidating && !refreshing && (
-                    <Tooltip
+                    <CustomTooltip
                         title={
                             <>
                                 {t('manga.error.label.request_failure')}
@@ -90,7 +90,7 @@ export const Manga: React.FC = () => {
                         <IconButton onClick={() => refetch()}>
                             <Warning color="error" />
                         </IconButton>
-                    </Tooltip>
+                    </CustomTooltip>
                 )}
                 {manga && (refreshing || isValidating) && (
                     <IconButton disabled>

src/modules/migration/screens/Migration.tsx

@@ -15,7 +15,7 @@ import SortByAlphaIcon from '@mui/icons-material/SortByAlpha';
 import TagIcon from '@mui/icons-material/Tag';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
-import Tooltip from '@mui/material/Tooltip';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
@@ -123,7 +123,7 @@ export const Migration = ({ tabsMenuHeight }: { tabsMenuHeight: number }) => {
                     zIndex: 1,
                 }}
             >
-                <Tooltip title={t(sortByToTranslationKey[sortBy])}>
+                <CustomTooltip title={t(sortByToTranslationKey[sortBy])}>
                     <IconButton
                         size="large"
                         color="inherit"
@@ -133,8 +133,8 @@ export const Migration = ({ tabsMenuHeight }: { tabsMenuHeight: number }) => {
                     >
                         {sortBy ? <TagIcon /> : <SortByAlphaIcon />}
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
-                <Tooltip title={t(sortOrderToTranslationKey[sortOrder])}>
+                <CustomTooltip title={t(sortOrderToTranslationKey[sortOrder])}>
                     <IconButton
                         size="large"
                         color="inherit"
@@ -147,7 +147,7 @@ export const Migration = ({ tabsMenuHeight }: { tabsMenuHeight: number }) => {
                     >
                         {sortOrder ? <ArrowDownwardIcon /> : <ArrowUpwardIcon />}
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
             </Stack>
             <List sx={{ p: 0 }}>
                 {migratableSources.map((migratableSource) => (

src/modules/navigation-bar/components/DesktopSideBar.tsx

@@ -20,7 +20,7 @@ import { styled, useTheme } from '@mui/material/styles';
 import { useCallback, useMemo, useRef } from 'react';
 import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
-import Tooltip from '@mui/material/Tooltip';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
 import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
@@ -55,7 +55,7 @@ const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }
 
     return (
         <ListItemLink selected={!isCollapsed && isActive} sx={{ p: 0, m: 0 }} to={path}>
-            <Tooltip title={t(title)} placement="right">
+            <CustomTooltip title={t(title)} placement="right">
                 <ListItem sx={listItemProps}>
                     <ListItemIcon sx={listItemIconProps}>
                         <Icon
@@ -84,7 +84,7 @@ const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }
                         }}
                     />
                 </ListItem>
-            </Tooltip>
+            </CustomTooltip>
         </ListItemLink>
     );
 };

src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx

@@ -20,9 +20,9 @@ import Menu from '@mui/material/Menu';
 import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
 import { alpha } from '@mui/material/styles';
-import Tooltip from '@mui/material/Tooltip';
 import Slide from '@mui/material/Slide';
 import { forwardRef, memo } from 'react';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
@@ -80,15 +80,15 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
                     boxShadow: 2,
                 }}
             >
-                <Tooltip title={t('reader.button.exit')}>
+                <CustomTooltip title={t('reader.button.exit')}>
                     <IconButton sx={{ marginRight: 2 }} onClick={handleBack} color="inherit">
                         {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
                 <Stack sx={{ flexGrow: 1 }}>
                     {manga && currentChapter ? (
                         <>
-                            <Tooltip title={title}>
+                            <CustomTooltip title={title}>
                                 <TypographyMaxLines lines={1} component="h1" variant="h5">
                                     <Link
                                         component={RouterLink}
@@ -98,20 +98,20 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
                                         {title}
                                     </Link>
                                 </TypographyMaxLines>
-                            </Tooltip>
+                            </CustomTooltip>
-                            <Tooltip title={name}>
+                            <CustomTooltip title={name}>
                                 <TypographyMaxLines lines={1}>{name}</TypographyMaxLines>
-                            </Tooltip>
+                            </CustomTooltip>
                         </>
                     ) : (
                         <LoadingPlaceholder />
                     )}
                 </Stack>
-                <Tooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
+                <CustomTooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
                     <IconButton onClick={() => Chapters.performAction(bookmarkAction, [chapterId], {})} color="inherit">
                         {isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
                 <IconButton {...bindTrigger(popupState)} color="inherit">
                     <MoreVertIcon />
                 </IconButton>

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -7,7 +7,6 @@
  */
 
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import { useTranslation } from 'react-i18next';
 import IconButton from '@mui/material/IconButton';
 import ArrowBack from '@mui/icons-material/ArrowBack';
@@ -17,6 +16,7 @@ import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
 import Divider from '@mui/material/Divider';
 import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import Drawer from '@mui/material/Drawer';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
 import { ReaderNavContainer } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavContainer.tsx';
@@ -111,12 +111,12 @@ const BaseReaderNavBarDesktop = ({
             <ReaderNavContainer sx={{ backgroundColor: 'background.paper', pointerEvents: 'all' }}>
                 <Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.hover' }}>
                     <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                        <Tooltip title={t('reader.button.exit')}>
+                        <CustomTooltip title={t('reader.button.exit')}>
                             <IconButton onClick={exit} color="inherit">
                                 {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
                             </IconButton>
-                        </Tooltip>
+                        </CustomTooltip>
-                        <Tooltip title={t('reader.settings.label.static_navigation')}>
+                        <CustomTooltip title={t('reader.settings.label.static_navigation')}>
                             <IconButton
                                 onClick={() => {
                                     setReaderNavBarWidth(0);
@@ -126,7 +126,7 @@ const BaseReaderNavBarDesktop = ({
                             >
                                 {isStaticNav ? <PushPinIcon /> : <PushPinOutlinedIcon />}
                             </IconButton>
-                        </Tooltip>
+                        </CustomTooltip>
                     </Stack>
                     {manga && currentChapter ? (
                         <>

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx

@@ -7,7 +7,6 @@
  */
 
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import { useTranslation } from 'react-i18next';
 import IconButton from '@mui/material/IconButton';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
@@ -17,6 +16,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { memo, useMemo, useRef } from 'react';
 import DeleteIcon from '@mui/icons-material/Delete';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
 import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
@@ -32,11 +32,11 @@ const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, '
 
     if (currentChapter && Chapters.isDownloaded(currentChapter)) {
         return (
-            <Tooltip title={t(actionToTranslationKey.delete.action.single)}>
+            <CustomTooltip title={t(actionToTranslationKey.delete.action.single)}>
                 <IconButton onClick={() => Chapters.performAction('delete', [currentChapter.id], {})} color="inherit">
                     <DeleteIcon />
                 </IconButton>
-            </Tooltip>
+            </CustomTooltip>
         );
     }
 
@@ -45,7 +45,7 @@ const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, '
     }
 
     return (
-        <Tooltip title={t(actionToTranslationKey.download.action.single)}>
+        <CustomTooltip title={t(actionToTranslationKey.download.action.single)} disabled={!currentChapter}>
             <IconButton
                 disabled={!currentChapter}
                 onClick={() => Chapters.performAction('download', [currentChapter?.id ?? -1], {})}
@@ -53,7 +53,7 @@ const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, '
             >
                 <DownloadIcon />
             </IconButton>
-        </Tooltip>
+        </CustomTooltip>
     );
 };
 
@@ -82,12 +82,12 @@ const BaseReaderNavBarDesktopActions = memo(
 
         return (
             <Stack sx={{ flexDirection: 'row', justifyContent: 'center', gap: 1 }}>
-                <Tooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
+                <CustomTooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
                     <IconButton onClick={() => Chapters.performAction(bookmarkAction, [id], {})} color="inherit">
                         {isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
-                <Tooltip title={t('reader.button.retry_load_pages')}>
+                <CustomTooltip title={t('reader.button.retry_load_pages')} disabled={!haveSomePagesFailedToLoad}>
                     <IconButton
                         onClick={() => {
                             setPageLoadStates((statePageLoadStates) =>
@@ -104,9 +104,9 @@ const BaseReaderNavBarDesktopActions = memo(
                     >
                         <ReplayIcon />
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
                 <DownloadButton currentChapter={currentChapter} />
-                <Tooltip title={t('chapter.action.label.open_on_source')}>
+                <CustomTooltip title={t('chapter.action.label.open_on_source')} disabled={!realUrl}>
                     <IconButton
                         disabled={!realUrl}
                         href={realUrl ?? ''}
@@ -116,7 +116,7 @@ const BaseReaderNavBarDesktopActions = memo(
                     >
                         <OpenInNewIcon />
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
             </Stack>
         );
     },

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopMetadata.tsx

@@ -7,11 +7,11 @@
  */
 
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import Link from '@mui/material/Link';
 
 import { Link as RouterLink } from 'react-router-dom';
 import { memo } from 'react';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 
@@ -28,7 +28,7 @@ export const ReaderNavBarDesktopMetadata = memo(
         scanlator?: string | null;
     }) => (
         <Stack>
-            <Tooltip title={mangaTitle} placement="right">
+            <CustomTooltip title={mangaTitle} placement="right">
                 <TypographyMaxLines lines={3} variant="h6" component="h1" sx={{ textAlign: 'center' }}>
                     <Link
                         component={RouterLink}
@@ -38,14 +38,14 @@ export const ReaderNavBarDesktopMetadata = memo(
                         {mangaTitle}
                     </Link>
                 </TypographyMaxLines>
-            </Tooltip>
+            </CustomTooltip>
-            <Tooltip title={chapterTitle} placement="right">
+            <CustomTooltip title={chapterTitle} placement="right">
                 <TypographyMaxLines lines={4} variant="body1" component="h2" sx={{ textAlign: 'center' }}>
                     {chapterTitle}
                 </TypographyMaxLines>
-            </Tooltip>
+            </CustomTooltip>
             {scanlator && (
-                <Tooltip title={scanlator} placement="right">
+                <CustomTooltip title={scanlator} placement="right">
                     <TypographyMaxLines
                         lines={4}
                         variant="body2"
@@ -55,7 +55,7 @@ export const ReaderNavBarDesktopMetadata = memo(
                     >
                         {scanlator}
                     </TypographyMaxLines>
-                </Tooltip>
+                </CustomTooltip>
             )}
         </Stack>
     ),

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx

@@ -6,23 +6,29 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Tooltip from '@mui/material/Tooltip';
 import { ComponentProps } from 'react';
 import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton';
 
 export const ReaderNavBarDesktopNextPreviousButton = ({
     title,
     type,
+    disabled,
     ...customIconButtonProps
 }: Omit<ComponentProps<typeof CustomIconButton>, 'children'> & {
     title: string;
     type: 'previous' | 'next';
 }) => (
-    <Tooltip title={title}>
+    <CustomTooltip title={title} disabled={disabled}>
-        <CustomIconButton sx={{ minWidth: 0, px: 1, flexBasis: '15%' }} variant="contained" {...customIconButtonProps}>
+        <CustomIconButton
+            sx={{ minWidth: 0, px: 1, flexBasis: '15%' }}
+            variant="contained"
+            disabled={disabled}
+            {...customIconButtonProps}
+        >
             {type === 'previous' ? <KeyboardArrowLeftIcon /> : <KeyboardArrowRightIcon />}
         </CustomIconButton>
-    </Tooltip>
+    </CustomTooltip>
 );

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx

@@ -7,9 +7,9 @@
  */
 
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import { useTranslation } from 'react-i18next';
 import FitScreenIcon from '@mui/icons-material/FitScreen';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton.tsx';
 import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
 import {
@@ -51,7 +51,7 @@ export const ReaderNavBarDesktopPageScale = ({
                 defaultIcon={PAGE_SCALE_VALUE_TO_DISPLAY_DATA[pageScaleMode.value].icon}
             />
             {READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode.value] && (
-                <Tooltip title={t('reader.settings.page_scale.stretch')}>
+                <CustomTooltip title={t('reader.settings.page_scale.stretch')}>
                     <CustomIconButton
                         onClick={() => updateSetting('shouldStretchPage', !shouldStretchPage.value)}
                         sx={{ minWidth: 0 }}
@@ -60,7 +60,7 @@ export const ReaderNavBarDesktopPageScale = ({
                     >
                         <FitScreenIcon />
                     </CustomIconButton>
-                </Tooltip>
+                </CustomTooltip>
             )}
         </Stack>
     );

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx

@@ -15,10 +15,10 @@ import { alpha } from '@mui/material/styles';
 import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
-import Tooltip from '@mui/material/Tooltip';
 import { useTranslation } from 'react-i18next';
 import Slide from '@mui/material/Slide';
 import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { ReaderBottomBarMobileProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
 import { MobileReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx';
 import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
@@ -89,21 +89,21 @@ const BaseReaderBottomBarMobile = ({
                                 alignItems: 'center',
                             }}
                         >
-                            <Tooltip title={t('reader.button.chapter_list')}>
+                            <CustomTooltip title={t('reader.button.chapter_list')}>
                                 <IconButton {...bindTrigger(chapterListPopupState)} size="large" color="inherit">
                                     <FormatListBulletedIcon />
                                 </IconButton>
-                            </Tooltip>
+                            </CustomTooltip>
-                            <Tooltip title={t('reader.settings.title.quick_settings')}>
+                            <CustomTooltip title={t('reader.settings.title.quick_settings')}>
                                 <IconButton {...bindTrigger(quickSettingsPopupState)} size="large" color="inherit">
                                     <AppSettingsAltIcon />
                                 </IconButton>
-                            </Tooltip>
+                            </CustomTooltip>
-                            <Tooltip title={t('settings.title')}>
+                            <CustomTooltip title={t('settings.title')}>
                                 <IconButton onClick={openSettings} size="large" color="inherit">
                                     <SettingsIcon />
                                 </IconButton>
-                            </Tooltip>
+                            </CustomTooltip>
                         </Stack>
                     </Stack>
                 </Slide>

src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx

@@ -7,8 +7,8 @@
  */
 
 import Box from '@mui/material/Box';
-import Tooltip from '@mui/material/Tooltip';
 import { ReactNode } from 'react';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { CurrentPageSlotProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
@@ -23,7 +23,7 @@ export const ReaderProgressBarCurrentPageSlot = ({
     children,
     progressBarPosition,
 }: CurrentPageSlotProps & { children?: ReactNode }) => (
-    <Tooltip
+    <CustomTooltip
         title={pageName}
         slotProps={{
             tooltip: { sx: { backgroundColor: 'primary.main', color: 'primary.contrastText' } },
@@ -50,5 +50,5 @@ export const ReaderProgressBarCurrentPageSlot = ({
         >
             {children}
         </Box>
-    </Tooltip>
+    </CustomTooltip>
 );

src/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx

@@ -7,15 +7,15 @@
  */
 
 import Box from '@mui/material/Box';
-import Tooltip from '@mui/material/Tooltip';
 import { memo, ReactNode } from 'react';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { ReaderProgressBarSlotProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 
 import { READER_PROGRESS_BAR_POSITION_TO_PLACEMENT } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 
 export const ReaderProgressBarSlot = memo(
     ({ pageName, progressBarPosition, slotProps, children }: ReaderProgressBarSlotProps & { children?: ReactNode }) => (
-        <Tooltip
+        <CustomTooltip
             {...slotProps?.tooltip}
             key={pageName}
             title={pageName}
@@ -24,6 +24,6 @@ export const ReaderProgressBarSlot = memo(
             <Box {...slotProps?.box} sx={{ width: '100%', height: '100%', ...slotProps?.box?.sx }}>
                 {children}
             </Box>
-        </Tooltip>
+        </CustomTooltip>
     ),
 );

src/modules/reader/components/settings/hotkeys/Hotkey.tsx

@@ -9,7 +9,7 @@
 import { Fragment } from 'react';
 import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
-import Tooltip from '@mui/material/Tooltip';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { Kbd } from '@/modules/core/components/Kbd.tsx';
 
 export const Hotkey = ({ keys, removeKey }: { keys: string[]; removeKey?: (key: string) => void }) => {
@@ -19,7 +19,7 @@ export const Hotkey = ({ keys, removeKey }: { keys: string[]; removeKey?: (key:
         <Stack sx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }}>
             {keys.map((key, index) => (
                 <Fragment key={key}>
-                    <Tooltip title={t('global.button.delete')} hidden={!removeKey}>
+                    <CustomTooltip title={t('global.button.delete')} hidden={!removeKey}>
                         <Stack
                             sx={{
                                 flexDirection: 'row',
@@ -36,7 +36,7 @@ export const Hotkey = ({ keys, removeKey }: { keys: string[]; removeKey?: (key:
                                 </Fragment>
                             ))}
                         </Stack>
-                    </Tooltip>
+                    </CustomTooltip>
                     {index === keys.length - 1 ? '' : ','}
                 </Fragment>
             ))}

src/modules/reader/components/settings/hotkeys/ReaderSettingHotkey.tsx

@@ -10,9 +10,9 @@ import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import AddIcon from '@mui/icons-material/Add';
 import Typography from '@mui/material/Typography';
-import Tooltip from '@mui/material/Tooltip';
 import { bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
 import IconButton from '@mui/material/IconButton';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { ReaderHotkey } from '@/modules/reader/types/Reader.types.ts';
 import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { TranslationKey } from '@/Base.types.ts';
@@ -60,11 +60,11 @@ export const ReaderSettingHotkey = ({
                     keys={keys}
                     removeKey={(keyToRemove) => updateSetting(keys.filter((key) => key !== keyToRemove))}
                 />
-                <Tooltip title={t('global.button.add')}>
+                <CustomTooltip title={t('global.button.add')}>
                     <IconButton {...bindTrigger(popupState)} color="inherit">
                         <AddIcon />
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
                 <ResetButton asIconButton onClick={() => updateSetting(DEFAULT_READER_SETTINGS.hotkeys[hotkey])} />
             </Stack>
             {popupState.isOpen && (

src/modules/source/components/SourceOptions.tsx

@@ -23,7 +23,7 @@ import DialogTitle from '@mui/material/DialogTitle';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import TextField from '@mui/material/TextField';
-import Tooltip from '@mui/material/Tooltip';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { OptionsPanel } from '@/modules/core/components/OptionsPanel.tsx';
 import { CheckBoxFilter } from '@/modules/source/components/filters/CheckBoxFilter.tsx';
 import { HeaderFilter } from '@/modules/source/components/filters/HeaderFilter.tsx';
@@ -199,11 +199,11 @@ export function SourceOptions({
                         <PopupState variant="dialog" popupId="source-browse-save-search">
                             {(popupState) => (
                                 <>
-                                    <Tooltip title={t('source.filter.save_search.label.save')}>
+                                    <CustomTooltip title={t('source.filter.save_search.label.save')}>
                                         <IconButton sx={{ marginLeft: 'auto' }} {...bindTrigger(popupState)}>
                                             <SaveIcon />
                                         </IconButton>
-                                    </Tooltip>
+                                    </CustomTooltip>
                                     <Dialog {...bindDialog(popupState)} maxWidth="xs" fullWidth>
                                         <DialogTitle>{t('source.filter.save_search.dialog.label.title')}</DialogTitle>
                                         <DialogContent>
@@ -269,9 +269,9 @@ export function SourceOptions({
                                                 .catch(defaultPromiseErrorHandler('SourceOptions::deleteSavedSearch'));
                                         }}
                                         deleteIcon={
-                                            <Tooltip title={t('source.filter.save_search.label.delete')}>
+                                            <CustomTooltip title={t('source.filter.save_search.label.delete')}>
                                                 <DeleteIcon />
-                                            </Tooltip>
+                                            </CustomTooltip>
                                         }
                                         variant="outlined"
                                     />

src/modules/source/screens/SourceMangas.tsx

@@ -15,11 +15,11 @@ import { useTranslation } from 'react-i18next';
 import Link from '@mui/material/Link';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import NewReleasesIcon from '@mui/icons-material/NewReleases';
 import FilterListIcon from '@mui/icons-material/FilterList';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import {
     requestManager,
     AbortableApolloUseMutationPaginatedResponse,
@@ -405,7 +405,7 @@ export function SourceMangas() {
                 <AppbarSearch />
                 <SourceGridLayout />
                 {source?.isConfigurable && (
-                    <Tooltip title={t('settings.title')}>
+                    <CustomTooltip title={t('settings.title')}>
                         <IconButton
                             onClick={() => navigate(AppRoutes.sources.childRoutes.configure.path(sourceId))}
                             aria-label="display more actions"
@@ -415,7 +415,7 @@ export function SourceMangas() {
                         >
                             <SettingsIcon />
                         </IconButton>
-                    </Tooltip>
+                    </CustomTooltip>
                 )}
             </>,
         );

src/modules/source/screens/Sources.tsx

@@ -8,11 +8,11 @@
 
 import { Fragment, useEffect, useLayoutEffect, useMemo } from 'react';
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import TravelExploreIcon from '@mui/icons-material/TravelExplore';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
 import {
@@ -108,7 +108,7 @@ export function Sources() {
     useLayoutEffect(() => {
         setAction(
             <>
-                <Tooltip title={t('search.title.global_search')}>
+                <CustomTooltip title={t('search.title.global_search')}>
                     <IconButton
                         onClick={() => navigate(AppRoutes.sources.childRoutes.searchAll.path)}
                         size="large"
@@ -116,7 +116,7 @@ export function Sources() {
                     >
                         <TravelExploreIcon />
                     </IconButton>
-                </Tooltip>
+                </CustomTooltip>
                 <LangSelect
                     shownLangs={shownLangs}
                     setShownLangs={setShownLangs}

src/modules/theme/components/CreateThemeButton.tsx

@@ -11,7 +11,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import AddCircleIcon from '@mui/icons-material/AddCircle';
 import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
-import Tooltip from '@mui/material/Tooltip';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { ThemeCreationDialog } from '@/modules/theme/components/CreateThemeDialog.tsx';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 
@@ -34,11 +34,11 @@ export const CreateThemeButton = () => {
                 >
                     <AddCircleIcon fontSize="large" />
                 </Button>
-                <Tooltip title={t('settings.appearance.theme.create.title')} placement="top">
+                <CustomTooltip title={t('settings.appearance.theme.create.title')} placement="top">
                     <TypographyMaxLines sx={{ maxWidth: '100%' }}>
                         {t('settings.appearance.theme.create.title')}
                     </TypographyMaxLines>
-                </Tooltip>
+                </CustomTooltip>
             </Stack>
             {popupState.isOpen && <ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="create" />}
         </>

src/modules/theme/components/ThemePreview.tsx

@@ -16,9 +16,9 @@ import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import EditIcon from '@mui/icons-material/Edit';
 import { bindDialog, usePopupState } from 'material-ui-popup-state/hooks';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { AppThemeContext } from '@/modules/theme/contexts/AppThemeContext.tsx';
 import { AppTheme, hasMissingFonts, loadThemeFonts } from '@/modules/theme/services/AppThemes.ts';
 import { createTheme } from '@/modules/theme/services/ThemeCreator.ts';
@@ -154,9 +154,9 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
                                                     size="small"
                                                     sx={{ mt: -0.5 }}
                                                 >
-                                                    <Tooltip title={t('global.button.delete')}>
+                                                    <CustomTooltip title={t('global.button.delete')}>
                                                         <DeleteIcon />
-                                                    </Tooltip>
+                                                    </CustomTooltip>
                                                 </IconButton>
                                             )}
                                             {appTheme.isCustom && (
@@ -169,9 +169,9 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
                                                     component="div"
                                                     size="small"
                                                 >
-                                                    <Tooltip title={t('global.button.edit')}>
+                                                    <CustomTooltip title={t('global.button.edit')}>
                                                         <EditIcon />
-                                                    </Tooltip>
+                                                    </CustomTooltip>
                                                 </IconButton>
                                             )}
                                         </Stack>
@@ -229,9 +229,9 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
                         </CardActionArea>
                     </Card>
                 </ThemeProvider>
-                <Tooltip title={getName()} placement="top">
+                <CustomTooltip title={getName()} placement="top">
                     <TypographyMaxLines sx={{ maxWidth: '100%' }}>{getName()}</TypographyMaxLines>
-                </Tooltip>
+                </CustomTooltip>
             </Stack>
             <ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="edit" appTheme={appTheme} />
         </>

src/modules/tracker/components/cards/TrackerActiveCard.tsx

@@ -23,11 +23,11 @@ import Link from '@mui/material/Link';
 import ListItemButton from '@mui/material/ListItemButton';
 import MenuItem from '@mui/material/MenuItem';
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PopupState, { bindDialog, bindMenu, bindTrigger } from 'material-ui-popup-state';
 import { useMemo, useState } from 'react';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { Trackers, TTrackerBind, TTrackRecordBind, UNSET_DATE } from '@/modules/tracker/services/Trackers.ts';
 import { ListPreference } from '@/modules/source/components/sourceConfiguration/ListPreference.tsx';
@@ -167,11 +167,11 @@ const TrackerActiveHeader = ({
             </TrackerActiveLink>
 
             <ListItemButton sx={{ flexGrow: 1 }} onClick={openSearch}>
-                <Tooltip title={trackRecord.title}>
+                <CustomTooltip title={trackRecord.title}>
                     <TypographyMaxLines flexGrow={1} lines={1}>
                         {trackRecord.title}
                     </TypographyMaxLines>
-                </Tooltip>
+                </CustomTooltip>
             </ListItemButton>
             <Stack
                 sx={{

src/modules/tracker/components/cards/TrackerMangaCard.tsx

@@ -16,12 +16,12 @@ import CardMedia from '@mui/material/CardMedia';
 import Collapse from '@mui/material/Collapse';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useLayoutEffect, useRef, useState } from 'react';
 import parseHtml from 'html-react-parser';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import sanitizeHtml from 'sanitize-html';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 import { Metadata } from '@/modules/core/components/Metadata.tsx';
@@ -37,11 +37,11 @@ const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: b
             justifyContent: 'space-between',
         }}
     >
-        <Tooltip title={title}>
+        <CustomTooltip title={title}>
             <TypographyMaxLines variant="h5" component="h1">
                 {title}
             </TypographyMaxLines>
-        </Tooltip>
+        </CustomTooltip>
         <CheckCircleIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} color="primary" />
     </Stack>
 );

src/modules/updates/components/ChapterUpdateCard.tsx

@@ -9,7 +9,6 @@
 import DownloadIcon from '@mui/icons-material/Download';
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
-import Tooltip from '@mui/material/Tooltip';
 import Avatar from '@mui/material/Avatar';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
@@ -18,6 +17,7 @@ import { Link, useLocation } from 'react-router-dom';
 import Refresh from '@mui/icons-material/Refresh';
 import { useTranslation } from 'react-i18next';
 import { memo } from 'react';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
 import { ChapterUpdateListFieldsFragment, DownloadState } from '@/lib/graphql/generated/graphql.ts';
 import { Mangas } from '@/modules/manga/services/Mangas.ts';
@@ -115,7 +115,7 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
                     </Box>
                     <DownloadStateIndicator chapterId={chapter.id} />
                     {download?.state === DownloadState.Error && (
-                        <Tooltip title={t('global.button.retry')}>
+                        <CustomTooltip title={t('global.button.retry')}>
                             <IconButton
                                 onClick={(e) => {
                                     e.preventDefault();
@@ -126,10 +126,10 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
                             >
                                 <Refresh />
                             </IconButton>
-                        </Tooltip>
+                        </CustomTooltip>
                     )}
                     {download == null && !chapter.isDownloaded && (
-                        <Tooltip title={t('chapter.action.download.add.label.action')}>
+                        <CustomTooltip title={t('chapter.action.download.add.label.action')}>
                             <IconButton
                                 onClick={(e) => {
                                     e.stopPropagation();
@@ -140,7 +140,7 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
                             >
                                 <DownloadIcon />
                             </IconButton>
-                        </Tooltip>
+                        </CustomTooltip>
                     )}
                 </CardContent>
             </CardActionArea>