Add tooltip for sensors

microsoft · Feb 20, 2020 · 836131a · 836131a
1 parent 4a7bea5
commit 836131a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx
@@ -53,7 +53,7 @@ export const CPX_TOOLBAR_ICON_ID = {
 export const MICROBIT_TOOLBAR_ID = {
     TEMPERATURE: "toolbar-temperature-sensor",
     LIGHT: "toolbar-light-sensor",
-    ACCELEROMETER: "toolbar-accelerometer",
+    ACCELEROMETER: "toolbar-accelerometer-sensor",
     LEDS: "toolbar-microbit-led",
     PUSH_BUTTON: "toolbar-microbit-button",
 };

diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx
@@ -13,6 +13,8 @@ import {
     IModalContent,
     LABEL_TO_MODAL_CONTENT,
 } from "./SensorModalUtils";
+import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+
 
 interface IToolbarState {
     currentOpenedId: string;
@@ -26,6 +28,7 @@ interface IProps extends WrappedComponentProps {
     }>;
 }
 
+
 class ToolBar extends React.Component<IProps, IToolbarState, any> {
     private readonly TOOLBAR_BUTTON_WIDTH: number = 32;
 
@@ -46,22 +49,30 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
                         {buttonList.map(
                             (currrentButton: any, index: number) => {
                                 return (
-                                    <Button
-                                        key={index}
-                                        label={currrentButton.label}
-                                        width={this.TOOLBAR_BUTTON_WIDTH}
-                                        onClick={(
-                                            e: React.MouseEvent<HTMLElement>
-                                        ) => {
-                                            this.handleOnClick(
-                                                e,
-                                                currrentButton.label
-                                            );
-                                        }}
-                                        image={currrentButton.image}
-                                        styleLabel="toolbar"
-                                        focusable={true}
-                                    />
+                                    <TooltipHost tooltipProps={
+                                        {
+                                            onRenderContent: () => (
+                                                <FormattedMessage id={`${currrentButton.label}.title`} />
+
+                                            )
+                                        }
+                                    } key={index}>  <Button
+                                            key={index}
+                                            label={currrentButton.label}
+                                            width={this.TOOLBAR_BUTTON_WIDTH}
+                                            onClick={(
+                                                e: React.MouseEvent<HTMLElement>
+                                            ) => {
+                                                this.handleOnClick(
+                                                    e,
+                                                    currrentButton.label
+                                                );
+                                            }}
+                                            image={currrentButton.image}
+                                            styleLabel="toolbar"
+                                            focusable={true}
+                                        /></TooltipHost>
+
                                 );
                             }
                         )}

diff --git a/src/view/translations/en.json b/src/view/translations/en.json
@@ -42,4 +42,4 @@
     "toolbar-microbit-button.title": "Buttons",
     "toolbar-microbit-button.description": "There are two buttons on the front of the micro:bit (labelled A and B). The third button is to trigger both A and B buttons. You can detect when these buttons are pressed, allowing you to trigger code on the device.",
     "toolbar-microbit-button.tryItDescription": "Click them with your mouse. Pressing “A” “B” on your keyboard will be implemented soon!"
-}
+}