Rename title to tooltip across editor toolbar components

ts/editor-toolbar/ColorPicker.d.ts

@@ -1,6 +1,6 @@
 export interface ColorPickerProps {
     id?: string;
     className?: string;
-    title: string;
+    tooltip: string;
     onChange: (event: Event) => void;
 }

ts/editor-toolbar/ColorPicker.svelte

@@ -2,7 +2,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
-    export let title: string;
+    export let tooltip: string;
 
     export let onChange: (event: Event) => void;
 </script>
@@ -47,7 +47,7 @@
     {id}
     class={className}
     {...props}
-    {title}
+    title={tooltip}
     on:mousedown|preventDefault>
     <span> <input type="color" on:change={onChange} /> </span>
 </button>

ts/editor-toolbar/CommandIconButton.d.ts

@@ -1,7 +1,7 @@
 export interface CommandIconButtonProps {
     id?: string;
     className?: string;
-    title: string;
+    tooltip: string;
     icon: string;
     command: string;
     activatable?: boolean;

ts/editor-toolbar/CommandIconButton.svelte

@@ -39,7 +39,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
-    export let title: string;
+    export let tooltip: string;
 
     export let icon;
     export let command: string;
@@ -62,6 +62,6 @@
     }
 </script>
 
-<SquareButton {id} {className} {props} {title} {active} {onClick} on:mount>
+<SquareButton {id} {className} {props} {tooltip} {active} {onClick} on:mount>
     {@html icon}
 </SquareButton>

ts/editor-toolbar/DropdownItem.d.ts

@@ -1,7 +1,7 @@
 export interface DropdownItemProps {
     id?: string;
     className?: string;
-    title: string;
+    tooltip: string;
 
     onClick: (event: MouseEvent) => void;
     label: string;

ts/editor-toolbar/DropdownItem.svelte

@@ -2,7 +2,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
-    export let title: string;
+    export let tooltip: string;
 
     export let onClick: (event: MouseEvent) => void;
     export let label: string;
@@ -13,7 +13,7 @@
     {id}
     class={`dropdown-item ${className}`}
     {...props}
-    {title}
+    title={tooltip}
     on:click={onClick}
     on:mousedown|preventDefault>
     <span class="float-start">{label}</span>

ts/editor-toolbar/IconButton.d.ts

@@ -1,7 +1,7 @@
 export interface IconButtonProps {
     id?: string;
     className?: string;
-    title: string;
+    tooltip: string;
     icon: string;
     onClick: (event: MouseEvent) => void;
 }

ts/editor-toolbar/IconButton.svelte

@@ -4,12 +4,12 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
-    export let title: string;
+    export let tooltip: string;
 
     export let icon = "";
     export let onClick: (event: MouseEvent) => void;
 </script>
 
-<SquareButton {id} {className} {props} {title} {onClick} on:mount>
+<SquareButton {id} {className} {props} {tooltip} {onClick} on:mount>
     {@html icon}
 </SquareButton>

ts/editor-toolbar/LabelButton.d.ts

@@ -3,7 +3,7 @@ export interface LabelButtonProps {
     className?: string;
 
     label: string;
-    title: string;
+    tooltip: string;
     onClick: (event: MouseEvent) => void;
     disables?: boolean;
 }

ts/editor-toolbar/LabelButton.svelte

@@ -7,7 +7,7 @@
     export let props: Record<string, string> = {};
 
     export let label: string;
-    export let title: string;
+    export let tooltip: string;
     export let onClick: (event: MouseEvent) => void;
     export let disables = true;
 
@@ -60,6 +60,6 @@
     {...props}
     on:click={onClick}
     on:mousedown|preventDefault
-    {title}>
+    title={tooltip}>
     {label}
 </button>

ts/editor-toolbar/SelectButton.svelte

@@ -12,7 +12,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
-    export let title: string;
+    export let tooltip: string;
 
     function extendClassName(classes: string) {
         return `form-select ${classes}`;
@@ -60,7 +60,7 @@
     {id}
     class={extendClassName(className)}
     {...props}
-    {title}>
+    title={tooltip}>
     {#each options as option}
         <SelectOption {...option} />
     {/each}

ts/editor-toolbar/SquareButton.svelte

@@ -6,7 +6,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
-    export let title: string;
+    export let tooltip: string;
 
     export let onClick: (event: MouseEvent) => void;
     export let active = false;
@@ -86,7 +86,7 @@
     {id}
     class={className}
     {...props}
-    {title}
+    title={tooltip}
     class:active
     tabindex="-1"
     disabled={_disabled}

ts/editor-toolbar/color.ts

@@ -24,26 +24,26 @@ function wrapWithForecolor(color: string): void {
 }
 
 const iconButton = dynamicComponent(IconButton);
-const forecolorButton = iconButton<IconButtonProps, "title">(
+const forecolorButton = iconButton<IconButtonProps, "tooltip">(
     {
         icon: squareFillIcon,
         className: "forecolor",
         onClick: () => wrapWithForecolor(getForecolor()),
     },
     {
-        title: tr.editingSetForegroundColourF7,
+        tooltip: tr.editingSetForegroundColourF7,
     }
 );
 
 const colorPicker = dynamicComponent(ColorPicker);
-const colorpickerButton = colorPicker<ColorPickerProps, "title">(
+const colorpickerButton = colorPicker<ColorPickerProps, "tooltip">(
     {
         className: "rainbow",
         onChange: ({ currentTarget }) =>
             setForegroundColor((currentTarget as HTMLInputElement).value),
     },
     {
-        title: tr.editingChangeColourF8,
+        tooltip: tr.editingChangeColourF8,
     }
 );
 

ts/editor-toolbar/format.ts

@@ -13,64 +13,64 @@ import eraserIcon from "./eraser.svg";
 
 const commandIconButton = dynamicComponent(CommandIconButton);
 
-const boldButton = commandIconButton<CommandIconButtonProps, "title">(
+const boldButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     {
         icon: boldIcon,
         command: "bold",
     },
     {
-        title: tr.editingBoldTextCtrlandb,
+        tooltip: tr.editingBoldTextCtrlandb,
     }
 );
 
-const italicButton = commandIconButton<CommandIconButtonProps, "title">(
+const italicButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     {
         icon: italicIcon,
         command: "italic",
     },
     {
-        title: tr.editingItalicTextCtrlandi,
+        tooltip: tr.editingItalicTextCtrlandi,
     }
 );
 
-const underlineButton = commandIconButton<CommandIconButtonProps, "title">(
+const underlineButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     {
         icon: underlineIcon,
         command: "underline",
     },
     {
-        title: tr.editingUnderlineTextCtrlandu,
+        tooltip: tr.editingUnderlineTextCtrlandu,
     }
 );
 
-const superscriptButton = commandIconButton<CommandIconButtonProps, "title">(
+const superscriptButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     {
         icon: superscriptIcon,
         command: "superscript",
     },
     {
-        title: tr.editingSuperscriptCtrlandand,
+        tooltip: tr.editingSuperscriptCtrlandand,
     }
 );
 
-const subscriptButton = commandIconButton<CommandIconButtonProps, "title">(
+const subscriptButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     {
         icon: subscriptIcon,
         command: "subscript",
     },
     {
-        title: tr.editingSubscriptCtrland,
+        tooltip: tr.editingSubscriptCtrland,
     }
 );
 
-const removeFormatButton = commandIconButton<CommandIconButtonProps, "title">(
+const removeFormatButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     {
         icon: eraserIcon,
         command: "removeFormat",
         activatable: false,
     },
     {
-        title: tr.editingRemoveFormattingCtrlandr,
+        tooltip: tr.editingRemoveFormattingCtrlandr,
     }
 );
 

ts/editor-toolbar/notetype.ts

@@ -6,25 +6,25 @@ import { bridgeCommand } from "anki/bridgecommand";
 import * as tr from "anki/i18n";
 
 const labelButton = dynamicComponent(LabelButton);
-const fieldsButton = labelButton<LabelButtonProps, "label" | "title">(
+const fieldsButton = labelButton<LabelButtonProps, "label" | "tooltip">(
     {
         onClick: () => bridgeCommand("fields"),
         disables: false,
     },
     {
         label: () => `${tr.editingFields()}...`,
-        title: tr.editingCustomizeFields,
+        tooltip: tr.editingCustomizeFields,
     }
 );
 
-const cardsButton = labelButton<LabelButtonProps, "label" | "title">(
+const cardsButton = labelButton<LabelButtonProps, "label" | "tooltip">(
     {
         onClick: () => bridgeCommand("cards"),
         disables: false,
     },
     {
         label: () => `${tr.editingCards()}...`,
-        title: tr.editingCustomizeCardTemplatesCtrlandl,
+        tooltip: tr.editingCustomizeCardTemplatesCtrlandl,
     }
 );
 

ts/editor-toolbar/template.ts

@@ -39,34 +39,34 @@ const withDropdownMenu = dynamicComponent(WithDropdownMenu);
 const dropdownMenu = dynamicComponent(DropdownMenu);
 const dropdownItem = dynamicComponent(DropdownItem);
 
-const attachmentButton = iconButton<IconButtonProps, "title">(
+const attachmentButton = iconButton<IconButtonProps, "tooltip">(
     {
         icon: paperclipIcon,
         onClick: onAttachment,
     },
     {
-        title: tr.editingAttachPicturesaudiovideoF3,
+        tooltip: tr.editingAttachPicturesaudiovideoF3,
     }
 );
 
 const recordButton = iconButton(
     { icon: micIcon, onClick: onRecord },
     {
-        title: tr.editingRecordAudioF5,
+        tooltip: tr.editingRecordAudioF5,
     }
 );
 
-const clozeButton = iconButton<IconButtonProps, "title">(
+const clozeButton = iconButton<IconButtonProps, "tooltip">(
     {
         icon: bracketsIcon,
         onClick: onCloze,
     },
     {
-        title: tr.editingClozeDeletionCtrlandshiftandc,
+        tooltip: tr.editingClozeDeletionCtrlandshiftandc,
     }
 );
 
-const mathjaxButton = iconButton<Omit<IconButtonProps, "onClick" | "title">>(
+const mathjaxButton = iconButton<Omit<IconButtonProps, "onClick" | "tooltip">>(
     {
         icon: functionIcon,
     },
@@ -82,7 +82,7 @@ const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
             dropdownItem<DropdownItemProps, "label">(
                 {
                     onClick: () => bridgeCommand("mathjaxInline"),
-                    title: "test",
+                    tooltip: "test",
                     endLabel: "test",
                 },
                 { label: tr.editingMathjaxInline }
@@ -90,7 +90,7 @@ const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
             dropdownItem<DropdownItemProps, "label">(
                 {
                     onClick: () => bridgeCommand("mathjaxBlock"),
-                    title: "test",
+                    tooltip: "test",
                     endLabel: "test",
                 },
                 { label: tr.editingMathjaxBlock }
@@ -98,7 +98,7 @@ const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
             dropdownItem<DropdownItemProps, "label">(
                 {
                     onClick: () => bridgeCommand("mathjaxChemistry"),
-                    title: "test",
+                    tooltip: "test",
                     endLabel: "test",
                 },
                 { label: tr.editingMathjaxChemistry }
@@ -116,13 +116,13 @@ const mathjaxButtonWithMenu = withDropdownMenu<WithDropdownMenuProps>(
     {}
 );
 
-const htmlButton = iconButton<IconButtonProps, "title">(
+const htmlButton = iconButton<IconButtonProps, "tooltip">(
     {
         icon: xmlIcon,
         onClick: onHtmlEdit,
     },
     {
-        title: tr.editingHtmlEditor,
+        tooltip: tr.editingHtmlEditor,
     }
 );