Added tooltips in more places

src/components/Chronology/ChronologyItemComponent.tsx

@@ -1,17 +1,25 @@
 import Chip from "components/Chip";
+import ToolTip from "components/ToolTip";
 import {
   Enum_Componenttranslationschronologyitem_Status,
   GetChronologyItemsQuery,
+  GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
+import { getStatusDescription } from "queries/helpers";
+import { useState } from "react";
 
 export type ChronologyItemComponentProps = {
   item: GetChronologyItemsQuery["chronologyItems"]["data"][number];
   displayYear: boolean;
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
 };
 
 export default function ChronologyItemComponent(
   props: ChronologyItemComponentProps
 ): JSX.Element {
+  const { langui } = props;
+  const [statusHovered, setStatusHovered] = useState(false);
+
   function generateAnchor(year: number, month: number, day: number): string {
     let result: string = "";
     result += year;
@@ -85,7 +93,23 @@ export default function ChronologyItemComponent(
                 <div className="place-items-start place-content-start grid grid-flow-col gap-2">
                   {translation.status !==
                     Enum_Componenttranslationschronologyitem_Status.Done && (
-                    <Chip>{translation.status}</Chip>
+                    <Chip
+                      onMouseEnter={() => setStatusHovered(true)}
+                      onMouseLeave={() => setStatusHovered(false)}
+                    >
+                      {translation.status}
+                      <ToolTip
+                        direction="top"
+                        hovered={statusHovered}
+                        offset={"1.5rem"}
+                        maxWidth="max-w-[10rem]"
+                        delayShow={100}
+                      >
+                        <p>
+                          {getStatusDescription(translation.status, langui)}
+                        </p>
+                      </ToolTip>
+                    </Chip>
                   )}
                   {translation.title ? <h3>{translation.title}</h3> : ""}
                 </div>

src/components/Chronology/ChronologyYearComponent.tsx

@@ -1,14 +1,20 @@
 import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
-import { GetChronologyItemsQuery } from "graphql/operations-types";
+import {
+  GetChronologyItemsQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
 
 type ChronologyYearComponentProps = {
   year: number;
   items: GetChronologyItemsQuery["chronologyItems"]["data"][number][];
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
 };
 
 export default function ChronologyYearComponent(
   props: ChronologyYearComponentProps
 ): JSX.Element {
+  const { langui } = props;
+
   return (
     <div
       className="target:bg-mid rounded-2xl target:py-4 target:my-4"
@@ -19,6 +25,7 @@ export default function ChronologyYearComponent(
           key={index}
           item={item}
           displayYear={index === 0}
+          langui={langui}
         />
       ))}
     </div>

src/components/Panels/SubPanel.tsx

@@ -4,7 +4,7 @@ type SubPanelProps = {
 
 export default function SubPanel(props: SubPanelProps): JSX.Element {
   return (
-    <div className="grid pt-10 pb-20 px-6 desktop:py-8 desktop:px-10 gap-y-2 justify-items-center text-center">
+    <div className="grid pt-10 pb-20 px-6 desktop:py-8 desktop:px-10 gap-y-2 text-center">
       {props.children}
     </div>
   );

src/components/ToolTip.tsx

@@ -3,15 +3,17 @@ import { useEffect, useState } from "react";
 type ToolTipProps = {
   hovered: boolean;
   children: React.ReactNode;
-  delayShow?: number;
   direction: "right" | "bottom" | "top" | "left";
   offset: string;
+  delayShow?: number;
+  maxWidth?: "max-w-[10rem]" | "max-w-xs" | "max-w-sm" | "max-w-md";
 };
 
 export default function ToolTip(props: ToolTipProps): JSX.Element {
   const { children, hovered, direction, offset } = props;
-  let { delayShow } = props;
+  let { delayShow, maxWidth } = props;
-  if (delayShow === undefined) delayShow = 500;
+  if (delayShow === undefined) delayShow = 300;
+  if (maxWidth === undefined) maxWidth = "max-w-sm";
 
   const [show, setShow] = useState(false);
 
@@ -62,7 +64,7 @@ export default function ToolTip(props: ToolTipProps): JSX.Element {
 
   return (
     <div
-      className={`fixed z-[100] drop-shadow-shade-xl transition-opacity max-w-sm ${
+      className={`fixed z-[100] drop-shadow-shade-xl transition-opacity ${maxWidth} ${
         show
           ? "opacity-100 pointer-events-auto"
           : "opacity-0 pointer-events-none"
@@ -74,7 +76,7 @@ export default function ToolTip(props: ToolTipProps): JSX.Element {
           className={`w-0 h-0 border-8 border-[transparent] place-self-center ${arrowCSS}`}
         />
       </div>
-      <div className="p-2 px-4 bg-light rounded-md">{children}</div>
+      <div className="p-4 px-6 bg-light rounded-md">{children}</div>
     </div>
   );
 }

src/pages/contents/[slug]/read.tsx

@@ -14,6 +14,7 @@ import ThumbnailHeader from "components/Content/ThumbnailHeader";
 import AppLayout from "components/AppLayout";
 import Markdawn from "components/Markdown/Markdawn";
 import {
+  getStatusDescription,
   prettyinlineTitle,
   prettyLanguage,
   prettySlug,
@@ -26,6 +27,8 @@ import Chip from "components/Chip";
 import RecorderChip from "components/RecorderChip";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 import TOC from "components/Markdown/TOC";
+import ToolTip from "components/ToolTip";
+import { useState } from "react";
 
 interface ContentReadProps extends AppStaticProps {
   content: GetContentTextQuery["contents"]["data"][number]["attributes"];
@@ -37,6 +40,8 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
   const { langui, content, languages } = props;
   const router = useRouter();
 
+  const [statusHovered, setStatusHovered] = useState(false);
+
   const subPanel = (
     <SubPanel>
       <ReturnButton
@@ -77,7 +82,23 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
           <div className="grid grid-flow-col place-items-center place-content-center gap-2">
             <p className="font-headers">{langui.status}:</p>
 
-            <Chip>{content.text_set[0].status}</Chip>
+            <Chip
+              onMouseEnter={() => setStatusHovered(true)}
+              onMouseLeave={() => setStatusHovered(false)}
+            >
+              {content.text_set[0].status}
+              <ToolTip
+                direction="top"
+                hovered={statusHovered}
+                offset={"1.5rem"}
+                maxWidth="max-w-[10rem]"
+                delayShow={100}
+              >
+                <p>
+                  {getStatusDescription(content.text_set[0].status, langui)}
+                </p>
+              </ToolTip>
+            </Chip>
           </div>
 
           {content.text_set[0].transcribers.data.length > 0 && (

src/pages/wiki/chronology.tsx

@@ -25,7 +25,7 @@ interface ChronologyProps extends AppStaticProps {
 
 export default function Chronology(props: ChronologyProps): JSX.Element {
   useTesting(props);
-  const { chronologyItems, chronologyEras } = props;
+  const { chronologyItems, chronologyEras, langui } = props;
 
   // Group by year the Chronology items
   let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][][] =
@@ -102,6 +102,7 @@ export default function Chronology(props: ChronologyProps): JSX.Element {
               key={`${eraIndex}-${index}`}
               year={items[0].attributes.year}
               items={items}
+              langui={langui}
             />
           ))}
         </>

src/queries/helpers.ts

@@ -4,6 +4,7 @@ import {
   ImageQuality,
 } from "components/Img";
 import {
+  Enum_Componentsetstextset_Status,
   GetCurrenciesQuery,
   GetLanguagesQuery,
   GetLibraryItemQuery,
@@ -251,6 +252,28 @@ export function sortContent(
   });
 }
 
+export function getStatusDescription(
+  status: string,
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]
+): string {
+  switch (status) {
+    case Enum_Componentsetstextset_Status.Incomplete:
+      return langui.status_incomplete;
+
+    case Enum_Componentsetstextset_Status.Draft:
+      return langui.status_draft;
+
+    case Enum_Componentsetstextset_Status.Review:
+      return langui.status_review;
+
+    case Enum_Componentsetstextset_Status.Done:
+      return langui.status_done;
+
+    default:
+      return "";
+  }
+}
+
 export function slugify(str: string): string {
   return str
     .replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g, "a")