Add command bar tooltips

source/Component/Localization/Localization.tsx

@@ -9,9 +9,11 @@ const LanguageDataBase = {
     EN_US, ZH_CN
 }
 
+type AllI18nKeys = keyof typeof EN_US;
+
 interface ILocalizationProps {
     className?: string;
-    i18nKey: keyof typeof EN_US;
+    i18nKey: AllI18nKeys;
     options?: Record<string, string>;
 }
 
@@ -73,4 +75,4 @@ class Localization extends Component<ILocalizationProps & IMixinSettingProps &
     }
 }
 
-export { Localization, I18N };
+export { Localization, I18N, LanguageDataBase, AllI18nKeys };

source/Component/Localization/LocalizationTooltipHost.tsx

@@ -0,0 +1,57 @@
+import { Component, ReactNode } from "react";
+import { TooltipHost, ITooltipHostProps } from "@fluentui/react";
+import { useSetting, IMixinSettingProps, Language } from "@Context/Setting";
+import { I18N, AllI18nKeys } from "./Localization";
+import "./Localization.scss";
+
+interface ILocalizationTooltipHostProps {
+    className?: string;
+    i18nKey: AllI18nKeys;
+    options?: Record<string, string>;
+}
+
+/**
+ * 本地化组件
+ */
+@useSetting
+class LocalizationTooltipHost extends Component<ILocalizationTooltipHostProps & IMixinSettingProps & 
+	ITooltipHostProps
+> {
+
+    private handelLanguageChange = () => {
+        this.forceUpdate();
+    }
+
+    public componentDidMount() {
+        if (this.props.setting) {
+            this.props.setting.on("language", this.handelLanguageChange);
+        }
+    }
+
+    public componentWillUnmount() {
+        if (this.props.setting) {
+            this.props.setting.off("language", this.handelLanguageChange);
+        }
+    }
+
+    public render(): ReactNode {
+        let language: Language = this.props.setting ? this.props.setting.language : "EN_US";
+        let classNameList: string[] = [];
+        if (this.props.className) classNameList.push(this.props.className);
+        classNameList.push(language);
+        let safeProps = {...this.props};
+        delete safeProps.className;
+        delete safeProps.setting;
+        delete (safeProps as any).i18nKey;
+        delete safeProps.options;
+        return <TooltipHost 
+			{...safeProps}
+			className={classNameList.join(" ")}
+			content={I18N(language, this.props.i18nKey, this.props.options)}
+		>
+            {this.props.children}
+        </TooltipHost>
+    }
+}
+
+export { LocalizationTooltipHost };