From c92977844ef5e1f3cd9f83b292fb856db92b8ae0 Mon Sep 17 00:00:00 2001
From: Daniel <50052685+schroda@users.noreply.github.com>
Date: Sat, 7 Jan 2023 16:44:39 +0100
Subject: [PATCH] Add tooltip containing full manga title to title of manga
 (#221)

In case the title is truncated it's still possible to view the full manga title.
Same way as it is done on e.g. Twitch or YouTube
---
 src/components/MangaCard.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/MangaCard.tsx b/src/components/MangaCard.tsx
index a640bc75..42bb16c3 100644
--- a/src/components/MangaCard.tsx
+++ b/src/components/MangaCard.tsx
@@ -178,6 +178,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                                             color: 'white',
                                             textShadow: '0px 0px 3px #000000',
                                         }}
+                                        title={title}
                                     >
                                         {truncateText(title, 61)}
                                     </MangaTitle>
@@ -190,6 +191,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                                     position: 'relative',
                                     color: 'text.primary',
                                 }}
+                                title={title}
                             >
                                 {truncateText(title, 61)}
                             </MangaTitle>
@@ -244,7 +246,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                                 width: 'min-content',
                             }}
                         >
-                            <Typography variant="h5" component="h2">
+                            <Typography variant="h5" component="h2" title={title}>
                                 {truncateText(title, 61)}
                             </Typography>
                         </Box>