Added Metadata Tooltip Information Modals

website/src/components/info-tooltip.css.ts

@@ -0,0 +1,61 @@
+import { style } from "@vanilla-extract/css"
+import { colors } from "src/style/constants"
+
+export const container = style({
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  marginLeft: "6px",
+  verticalAlign: "middle",
+})
+
+export const icon = style({
+  color: colors.primary,
+  fontSize: "14px",
+  transition: "color 0.2s ease",
+  cursor: "pointer",
+  selectors: {
+    [`${container}:hover &`]: {
+      color: "#333",
+    },
+  },
+})
+
+export const tooltip = style({
+  position: "absolute",
+  bottom: "120%",
+  left: "50%",
+  transform: "translateX(-50%)",
+  width: "240px",
+  padding: "10px 14px",
+  backgroundColor: "white",
+  color: "black",
+  borderRadius: "6px",
+  fontSize: "12px",
+  lineHeight: "1.5",
+  zIndex: 1000,
+  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+  visibility: "hidden",
+  opacity: 0,
+  pointerEvents: "none",
+  textAlign: "left",
+
+  // CSS of the little triangle arrow at the bottom
+  ":after": {
+    content: '""',
+    position: "absolute",
+    top: "100%",
+    left: "50%",
+    marginLeft: "-5px",
+    borderWidth: "5px",
+    borderStyle: "solid",
+    borderColor: "white transparent transparent transparent",
+  },
+
+  selectors: {
+    [`${container}:hover &`]: {
+      visibility: "visible",
+      opacity: 1,
+    },
+  },
+})

website/src/components/info-tooltip.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import { FiInfo } from "react-icons/fi/index"
+import * as css from "./info-tooltip.css"
+
+interface InfoTooltipProps {
+  content: string
+}
+
+export const InfoTooltip: React.FC<InfoTooltipProps> = ({ content }) => {
+  return (
+    <div className={css.container}>
+      <FiInfo className={css.icon} />
+      <div className={css.tooltip}>{content}</div>
+    </div>
+  )
+}

website/src/pages/documents/edit-document-modal.tsx

@@ -2,8 +2,10 @@ import { plugins } from "@citation-js/core"
 import type React from "react"
 import { useEffect, useMemo, useState } from "react"
 import DatePicker from "react-date-picker"
+import { FiInfo } from "react-icons/fi/index"
 import TextareaAutosize from "react-textarea-autosize"
 import { v4 as uuidv4 } from "uuid"
+import { InfoTooltip } from "src/components/info-tooltip"
 import { form } from "src/edit-word-feature.css"
 import * as Dailp from "src/graphql/dailp"
 import { UserRole, useUserRole } from "../../auth"
@@ -52,6 +54,22 @@ function getDisplayName(code: string) {
   return Object.keys(formatMap).find((key) => formatMap[key] === code) ?? code
 }
 
+// Tool tips for metadata types
+const TOOLTIP_TEXT = {
+  date: "Date that the physical resource we are translated here was created.",
+  docType:
+    "Distinguishes resources by describing the nature of this resource's content. Please use format and genre for more information.",
+  format: "File type for this digital version of the resource.",
+  contributors:
+    "People who work to create the resources on the site, labelled by the types of contributions they made.",
+  keywords:
+    "Main words that represent this resource’s content. This helps to improve searching on our site, but can also be a good place to gain context for the resource.",
+  subjectHeadings:
+    "Topic or main concept of this resource’s content, including Indigenous knowledge practices.",
+  spatialCoverage:
+    "Locations, dates, and/or time periods that appear throughout this resource.",
+}
+
 // Reusable approved tags lists
 const approvedKeywords = [
   "Colonialism",
@@ -611,7 +629,9 @@ export const EditDocumentModal: React.FC<EditDocumentModalProps> = ({
             </div>
 
             <div className={styles.fieldGroup}>
-              <label className={styles.label}>Date Created</label>
+              <label className={styles.label}>
+                Date Created <InfoTooltip content={TOOLTIP_TEXT.date} />
+              </label>
               <DatePicker
                 onChange={(newDate: any) => setDate(newDate)}
                 value={date}
@@ -639,7 +659,9 @@ export const EditDocumentModal: React.FC<EditDocumentModalProps> = ({
 
           <div className={styles.formGrid}>
             <div className={styles.fieldGroup}>
-              <label className={styles.label}>Document Type</label>
+              <label className={styles.label}>
+                Document Type <InfoTooltip content={TOOLTIP_TEXT.docType} />
+              </label>
               <input
                 type="text"
                 className={styles.input}
@@ -650,7 +672,9 @@ export const EditDocumentModal: React.FC<EditDocumentModalProps> = ({
             </div>
 
             <div className={styles.fieldGroup}>
-              <label className={styles.label}>Format</label>
+              <label className={styles.label}>
+                Format <InfoTooltip content={TOOLTIP_TEXT.format} />
+              </label>
               <input
                 type="text"
                 className={styles.input}
@@ -760,6 +784,7 @@ export const EditDocumentModal: React.FC<EditDocumentModalProps> = ({
                 </div>
               ) : null
             }
+            tooltipInfo={TOOLTIP_TEXT.contributors}
           />
 
           {/* <div className={styles.fullWidthGroup}>
@@ -793,6 +818,7 @@ export const EditDocumentModal: React.FC<EditDocumentModalProps> = ({
             onAdd={(tagName) => addKeyword(tagName)}
             onRemove={removeKeyword}
             addButtonLabel="Add Keyword"
+            tooltipInfo={TOOLTIP_TEXT.keywords}
           />
 
           <TagSelector
@@ -803,6 +829,7 @@ export const EditDocumentModal: React.FC<EditDocumentModalProps> = ({
             onAdd={isEditing ? addHeading : undefined}
             onRemove={isEditing ? removeHeading : undefined}
             addButtonLabel="Add Subject Heading"
+            tooltipInfo={TOOLTIP_TEXT.subjectHeadings}
           />
 
           <TagSelector
@@ -823,6 +850,7 @@ export const EditDocumentModal: React.FC<EditDocumentModalProps> = ({
             onAdd={isEditing ? addCoverage : undefined}
             onRemove={isEditing ? removeCoverage : undefined}
             addButtonLabel="Add Spatial Coverage"
+            tooltipInfo={TOOLTIP_TEXT.spatialCoverage}
           />
 
           {/* Might need to pull the creator(s) from creator or contributors w/ author role */}

website/src/pages/documents/tag-selector.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react"
+import { InfoTooltip } from "src/components/info-tooltip"
 import * as styles from "./tag-selector.css"
 
 interface TagSelectorProps {
@@ -10,6 +11,7 @@ interface TagSelectorProps {
   onRemove?: (index: number) => void
   addButtonLabel: string
   customForm?: React.ReactNode
+  tooltipInfo?: string
 }
 
 export const TagSelector: React.FC<TagSelectorProps> = ({
@@ -21,12 +23,15 @@ export const TagSelector: React.FC<TagSelectorProps> = ({
   onRemove,
   addButtonLabel,
   customForm,
+  tooltipInfo,
 }) => {
   const [showDropdown, setShowDropdown] = useState(false)
 
   return (
     <div className={styles.fullWidthGroup}>
-      <label className={styles.label}>{label}</label>
+      <label className={styles.label}>
+        {label} {tooltipInfo && <InfoTooltip content={tooltipInfo} />}
+      </label>
 
       <div className={styles.tagsContainer}>
         {selectedTags.map((tag, index) => (