feat: add tooltips to tautulli avatars (sct#3601)

lenaxia · Jan 3, 2024 · 6ed6479 · 6ed6479
1 parent 2fcaae1
commit 6ed6479
Showing 1 changed file with 20 additions and 10 deletions.
diff --git 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>
                               ))}