New: Tooltip with extra genres on movie details page

frontend/src/Movie/Details/MovieDetails.js

@@ -42,6 +42,7 @@ import translate from 'Utilities/String/translate';
 import MovieCastPosters from './Credits/Cast/MovieCastPosters';
 import MovieCrewPosters from './Credits/Crew/MovieCrewPosters';
 import MovieDetailsLinks from './MovieDetailsLinks';
+import MovieGenres from './MovieGenres';
 import MovieReleaseDates from './MovieReleaseDates';
 import MovieStatusLabel from './MovieStatusLabel';
 import MovieTagsConnector from './MovieTagsConnector';
@@ -651,9 +652,7 @@ class MovieDetails extends Component {
                         name={translate('Genres')}
                         size={sizes.LARGE}
                       >
-                        <span className={styles.genres}>
+                        <MovieGenres className={styles.genres} genres={genres} />
-                          {genres.join(', ')}
-                        </span>
                       </InfoLabel> :
                       null
                   }

frontend/src/Movie/Details/MovieGenres.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Label from 'Components/Label';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { kinds, sizes, tooltipPositions } from 'Helpers/Props';
+
+interface MovieGenresProps {
+  className?: string;
+  genres: string[];
+}
+
+function MovieGenres({ className, genres }: MovieGenresProps) {
+  const firstGenres = genres.slice(0, 3);
+  const otherGenres = genres.slice(3);
+
+  if (otherGenres.length) {
+    return (
+      <Tooltip
+        anchor={<span className={className}>{firstGenres.join(', ')}</span>}
+        tooltip={
+          <div>
+            {otherGenres.map((tag) => {
+              return (
+                <Label key={tag} kind={kinds.INFO} size={sizes.LARGE}>
+                  {tag}
+                </Label>
+              );
+            })}
+          </div>
+        }
+        kind={kinds.INVERSE}
+        position={tooltipPositions.TOP}
+      />
+    );
+  }
+
+  return <span className={className}>{firstGenres.join(', ')}</span>;
+}
+
+export default MovieGenres;