UoaWDCC · del-ereno · Jun 5, 2026 · May 27, 2026
diff --git a/frontend/src/features/authoring/images.tsx b/frontend/src/features/authoring/images.tsx
@@ -164,7 +164,7 @@ function ImageCreateMenu() {
   return (
     <>
       <div className="dropdown">
-        <li>
+        <li className="tooltip tooltip-bottom" data-tip="Add image">
           <a tabIndex={0}>
             <ImageIcon size={16} />
           </a>

diff --git a/frontend/src/features/authoring/topbar/ShapeCreateMenu.tsx b/frontend/src/features/authoring/topbar/ShapeCreateMenu.tsx
@@ -19,7 +19,7 @@ function ShapeCreateMenu() {
   return (
     <>
       <div className="dropdown">
-        <li>
+        <li className="tooltip tooltip-bottom" data-tip="Add shape">
           <a tabIndex={0}>
             <ShapesIcon size={16} />
           </a>
@@ -28,22 +28,22 @@ function ShapeCreateMenu() {
           tabIndex={0}
           className="dropdown-content menu menu-horizontal bg-base-300 rounded-box z-1 p-2 shadow-sm top-[38px] w-max"
         >
-          <li>
+          <li className="tooltip tooltip-bottom" data-tip="Box">
             <a onClick={() => switchCreate("box")}>
               <VectorSquare size={16} />
             </a>
           </li>
-          <li>
+          <li className="tooltip tooltip-bottom" data-tip="Ellipse">
             <a onClick={() => switchCreate("ellipse")}>
               <Diameter size={16} />
             </a>
           </li>
-          <li>
+          <li className="tooltip tooltip-bottom" data-tip="Line">
             <a onClick={() => switchCreate("line")}>
               <Spline size={16} />
             </a>
           </li>
-          <li>
+          <li className="tooltip tooltip-bottom" data-tip="Speech bubble">
             <a onClick={() => switchCreate("speech")}>
               <MessageSquare size={16} />
             </a>

diff --git a/frontend/src/features/authoring/topbar/ShapeSection.tsx b/frontend/src/features/authoring/topbar/ShapeSection.tsx
@@ -39,19 +39,22 @@ function ShapeSection() {
       <ChromePicker
         value={props.fill}
         onChange={(value) => modifyProps("fill", value)}
+        tooltip="Fill color"
       >
         <PaintBucket size={13} />
       </ChromePicker>
       <ChromePicker
         value={props.stroke}
         onChange={(value) => modifyProps("stroke", value)}
+        tooltip="Stroke color"
       >
         <Pencil size={13} />
       </ChromePicker>
       <MultiInput
         value={props.strokeWidth}
         values={widths}
         onChange={(v) => modifyProps("strokeWidth", v)}
+        tooltip="Stroke width"
       >
         <RulerIcon size={16} />
       </MultiInput>

diff --git a/frontend/src/features/authoring/topbar/TextSection.tsx b/frontend/src/features/authoring/topbar/TextSection.tsx
@@ -58,19 +58,20 @@ function TextSection() {
       />
 
       <div className="divider divider-horizontal" />
-
-      <NumberInput
-        value={Number(style.fontSize)}
-        onChange={(value) => modifyStyle("fontSize", value)}
-      />
-
+      <div className="tooltip tooltip-bottom" data-tip="Font size">
+        <NumberInput
+          value={Number(style.fontSize)}
+          onChange={(value) => modifyStyle("fontSize", value)}
+        />
+      </div>
       <div className="divider divider-horizontal" />
 
       <ToggleInput
         value={style.fontWeight}
         onToggle={(value) => modifyStyle("fontWeight", value)}
         enabled="bold"
         disabled="normal"
+        tooltip="Bold"
       >
         <Bold size={16} />
       </ToggleInput>
@@ -79,6 +80,7 @@ function TextSection() {
         onToggle={(value) => modifyStyle("fontStyle", value)}
         enabled="italic"
         disabled="normal"
+        tooltip="Italic"
       >
         <Italic size={16} />
       </ToggleInput>
@@ -87,18 +89,21 @@ function TextSection() {
         onToggle={(value) => modifyStyle("textDecoration", value)}
         enabled="underline"
         disabled="none"
+        tooltip="Underline"
       >
         <Underline size={16} />
       </ToggleInput>
       <ChromePicker
         value={style.textColor}
         onChange={(value) => modifyStyle("textColor", value)}
+        tooltip="Text color"
       >
         <span>A</span>
       </ChromePicker>
       <ChromePicker
         value={style.highlightColor}
         onChange={(value) => modifyStyle("highlightColor", value)}
+        tooltip="Highlight color"
       >
         <Highlighter size={14} />
       </ChromePicker>
@@ -114,6 +119,7 @@ function TextSection() {
           <AlignRight size={16} />,
         ]}
         onChange={(value) => modifyStyle("alignment", value)}
+        tooltip="Alignment"
       >
         <AlignLeft size={16} />
       </MultiInput>
@@ -122,6 +128,7 @@ function TextSection() {
         value={style.lineHeight}
         values={[1, 1.1, 1.25, 1.5, 1.75, 2]}
         onChange={(value) => modifyStyle("lineHeight", value)}
+        tooltip="Line height"
       >
         <ArrowDownNarrowWide size={16} />
       </MultiInput>

diff --git a/frontend/src/features/authoring/topbar/Topbar.tsx b/frontend/src/features/authoring/topbar/Topbar.tsx
@@ -44,12 +44,12 @@ function Topbar({ saving, save }: { saving: boolean; save: () => void }) {
 
         <div className="divider divider-horizontal" />
 
-        <li>
+        <li className="tooltip tooltip-bottom" data-tip="Undo">
           <a onClick={undo}>
             <Undo2Icon size={16} />
           </a>
         </li>
-        <li>
+        <li className="tooltip tooltip-bottom" data-tip="Redo">
           <a onClick={redo}>
             <Redo2Icon size={16} />
           </a>
@@ -59,7 +59,7 @@ function Topbar({ saving, save }: { saving: boolean; save: () => void }) {
 
         {/* element creation */}
         <ImageCreateMenu />
-        <li>
+        <li className="tooltip tooltip-bottom" data-tip="Add text">
           <a onClick={() => switchCreate("textbox")}>
             <Type size={16} />
           </a>
@@ -72,12 +72,12 @@ function Topbar({ saving, save }: { saving: boolean; save: () => void }) {
             <div className="divider divider-horizontal" />
 
             {/* reorder */}
-            <li>
+            <li className="tooltip tooltip-bottom" data-tip="Bring to front">
               <a onClick={() => bringToFront(selected)}>
                 <BringToFront size={16} />
               </a>
             </li>
-            <li>
+            <li className="tooltip tooltip-bottom" data-tip="Send to back">
               <a onClick={() => sendToBack(selected)}>
                 <SendToBack size={16} />
               </a>

diff --git a/frontend/src/features/authoring/wrapper/ChromePicker.tsx b/frontend/src/features/authoring/wrapper/ChromePicker.tsx
@@ -5,9 +5,11 @@ function ChromePicker({
   children,
   value,
   onChange,
+  tooltip,
 }: React.PropsWithChildren<{
   value: string;
   onChange: (value: string) => void;
+  tooltip?: string;
 }>) {
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement | null>(null);
@@ -25,7 +27,10 @@ function ChromePicker({
 
   return (
     <div style={{ position: "relative", display: "flex" }}>
-      <li>
+      <li
+        className={tooltip ? "tooltip tooltip-bottom" : undefined}
+        data-tip={tooltip}
+      >
         <a
           className={`${open && "bg-base-100"}`}
           onClick={() => setOpen(!open)}

diff --git a/frontend/src/features/authoring/wrapper/MultiInput.tsx b/frontend/src/features/authoring/wrapper/MultiInput.tsx
@@ -5,6 +5,7 @@ type MultiInputProps = React.PropsWithChildren<{
   values: MultiInputProps["value"][];
   items?: ReactElement[];
   onChange: (value: MultiInputProps["value"]) => void;
+  tooltip?: string;
 }>;
 
 function MultiInput({
@@ -13,10 +14,14 @@ function MultiInput({
   items,
   onChange,
   children,
+  tooltip,
 }: MultiInputProps) {
   return (
     <div className="dropdown">
-      <li>
+      <li
+        className={tooltip ? "tooltip tooltip-bottom" : undefined}
+        data-tip={tooltip}
+      >
         <a tabIndex={0}>{children}</a>
       </li>
       <ul

diff --git a/frontend/src/features/authoring/wrapper/ToggleInput.tsx b/frontend/src/features/authoring/wrapper/ToggleInput.tsx
@@ -3,6 +3,7 @@ type ToggleInputProps = React.PropsWithChildren<{
   onToggle: (value: string) => void;
   enabled: string;
   disabled: string;
+  tooltip?: string;
 }>;
 
 function ToggleInput({
@@ -11,6 +12,7 @@ function ToggleInput({
   onToggle,
   enabled,
   disabled,
+  tooltip,
 }: ToggleInputProps) {
   const active = value === enabled;
 
@@ -20,7 +22,10 @@ function ToggleInput({
   }
 
   return (
-    <li>
+    <li
+      className={tooltip ? "tooltip tooltip-bottom" : undefined}
+      data-tip={tooltip}
+    >
       <a className={`${active && "bg-base-100"}`} onClick={handleClick}>
         {children}
       </a>