From c484810f965f8d04643c25c6d283dd83f4bd4a23 Mon Sep 17 00:00:00 2001
From: Ryan Cohen <ryan@sct.dev>
Date: Thu, 31 Aug 2023 08:35:45 +0900
Subject: [PATCH] feat: add tooltips to tautulli avatars (#3601)

---
 src/components/ManageSlideOver/index.tsx | 30 ++++++++++++++++--------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/ManageSlideOver/index.tsx b/src/components/ManageSlideOver/index.tsx
index 8609c828c..103781d1c 100644
--- a/src/components/ManageSlideOver/index.tsx
+++ b/src/components/ManageSlideOver/index.tsx
@@ -277,11 +277,16 @@ const ManageSlideOver = ({
                                   key={`watch-user-${user.id}`}
                                 >
                                   <a className="z-0 mb-1 -mr-2 shrink-0 hover:z-50">
-                                    <img
-                                      src={user.avatar}
-                                      alt={user.displayName}
-                                      className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
-                                    />
+                                    <Tooltip
+                                      key={`watch-user-${user.id}`}
+                                      content={user.displayName}
+                                    >
+                                      <img
+                                        src={user.avatar}
+                                        alt={user.displayName}
+                                        className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
+                                      />
+                                    </Tooltip>
                                   </a>
                                 </Link>
                               ))}
@@ -398,11 +403,16 @@ const ManageSlideOver = ({
                                   key={`watch-user-${user.id}`}
                                 >
                                   <a className="z-0 mb-1 -mr-2 shrink-0 hover:z-50">
-                                    <img
-                                      src={user.avatar}
-                                      alt={user.displayName}
-                                      className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
-                                    />
+                                    <Tooltip
+                                      key={`watch-user-${user.id}`}
+                                      content={user.displayName}
+                                    >
+                                      <img
+                                        src={user.avatar}
+                                        alt={user.displayName}
+                                        className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
+                                      />
+                                    </Tooltip>
                                   </a>
                                 </Link>
                               ))}