added tooltip for working toolbar buttons (#3642)

Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>
cognitedata · Aug 29, 2023 · 88bfba3 · 88bfba3
1 parent c0e883b
commit 88bfba3
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 79 deletions.
diff --git a/react-components/src/components/RevealToolbar/FitModelsButton.tsx b/react-components/src/components/RevealToolbar/FitModelsButton.tsx
@@ -4,7 +4,7 @@
 
 import { type ReactElement, useCallback } from 'react';
 
-import { Button } from '@cognite/cogs.js';
+import { Button, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 import { useCameraNavigation } from '../../hooks/useCameraNavigation';
 
 export const FitModelsButton = (): ReactElement => {
@@ -15,11 +15,13 @@ export const FitModelsButton = (): ReactElement => {
   }, []);
 
   return (
-    <Button
-      type="ghost"
-      icon="ExpandAlternative"
-      aria-label="Fit camera to models"
-      onClick={updateCamera}
-    />
+    <CogsTooltip content={'Fit view'} placement="right" appendTo={document.body}>
+      <Button
+        type="ghost"
+        icon="ExpandAlternative"
+        aria-label="Fit camera to models"
+        onClick={updateCamera}
+      />
+    </CogsTooltip>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/HelpButton.tsx b/react-components/src/components/RevealToolbar/HelpButton.tsx
@@ -4,26 +4,28 @@
 
 import { type ReactElement } from 'react';
 
-import { Button, Dropdown } from '@cognite/cogs.js';
+import { Button, Dropdown, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 import styled from 'styled-components';
 import { MouseNavigation } from './Help/MouseNavigation';
 import { TouchNavigation } from './Help/TouchNavigation';
 import { KeyboardNavigation } from './Help/KeyboardNavigation';
 
 export const HelpButton = (): ReactElement => {
   return (
-    <Dropdown
-      appendTo={document.body}
-      content={
-        <StyledMenu>
-          <MouseNavigation />
-          <KeyboardNavigation />
-          <TouchNavigation />
-        </StyledMenu>
-      }
-      placement="right">
-      <Button type="ghost" icon="Help" aria-label="help-button" />
-    </Dropdown>
+    <CogsTooltip content={'Help'} placement="right" appendTo={document.body}>
+      <Dropdown
+        appendTo={document.body}
+        content={
+          <StyledMenu>
+            <MouseNavigation />
+            <KeyboardNavigation />
+            <TouchNavigation />
+          </StyledMenu>
+        }
+        placement="right">
+        <Button type="ghost" icon="Help" aria-label="help-button" />
+      </Dropdown>
+    </CogsTooltip>
   );
 };
 

diff --git a/react-components/src/components/RevealToolbar/LayersButton.tsx b/react-components/src/components/RevealToolbar/LayersButton.tsx
@@ -3,7 +3,7 @@
  */
 
 import { type ReactElement, useState, useEffect, useMemo, useRef } from 'react';
-import { Button, Dropdown } from '@cognite/cogs.js';
+import { Button, Dropdown, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 import { type Reveal3DResourcesLayerStates } from './LayersContainer/types';
 import LayersContainer from './LayersContainer/LayersContainer';
 import {
@@ -155,19 +155,21 @@ export const LayersButton = (): ReactElement => {
   }, [viewer]);
 
   return (
-    <Dropdown
-      appendTo={revealContainerElement ?? document.body}
-      content={
-        <LayersContainer
-          props={{
-            reveal3DResourcesLayerData,
-            setReveal3DResourcesLayerData
-          }}
-        />
-      }
-      visible={visible}
-      placement="auto">
-      <Button type="ghost" icon="Layers" aria-label="3D Resource layers" onClick={showLayers} />
-    </Dropdown>
+    <CogsTooltip content={'Filter 3D resource layers'} placement="right" appendTo={document.body}>
+      <Dropdown
+        appendTo={revealContainerElement ?? document.body}
+        content={
+          <LayersContainer
+            props={{
+              reveal3DResourcesLayerData,
+              setReveal3DResourcesLayerData
+            }}
+          />
+        }
+        visible={visible}
+        placement="auto">
+        <Button type="ghost" icon="Layers" aria-label="3D Resource layers" onClick={showLayers} />
+      </Dropdown>
+    </CogsTooltip>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/MeasurementButton.tsx b/react-components/src/components/RevealToolbar/MeasurementButton.tsx
@@ -4,7 +4,7 @@
 
 import { useMemo, type ReactElement, useState, useEffect } from 'react';
 import { useReveal } from '../RevealContainer/RevealContext';
-import { Button } from '@cognite/cogs.js';
+import { Button, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 import { MeasurementTool } from '@cognite/reveal/tools';
 import { FEET_TO_INCHES, METERS_TO_FEET } from '../../utilities/constants';
 
@@ -56,14 +56,16 @@ export const MeasurementButton = (): ReactElement => {
   }, [measurementEnabled]);
 
   return (
-    <Button
-      type="ghost"
-      icon="Ruler"
-      toggled={measurementEnabled}
-      aria-label="Make measurements"
-      onClick={() => {
-        handleMeasurement(!measurementEnabled);
-      }}
-    />
+    <CogsTooltip content={'Distance measuring tool'} placement="right" appendTo={document.body}>
+      <Button
+        type="ghost"
+        icon="Ruler"
+        toggled={measurementEnabled}
+        aria-label="Make measurements"
+        onClick={() => {
+          handleMeasurement(!measurementEnabled);
+        }}
+      />
+    </CogsTooltip>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/SettingsButton.tsx b/react-components/src/components/RevealToolbar/SettingsButton.tsx
@@ -3,7 +3,7 @@
  */
 
 import { type ReactElement } from 'react';
-import { Button, Dropdown, Menu } from '@cognite/cogs.js';
+import { Button, Dropdown, Menu, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 import { type QualitySettings } from './SettingsContainer/types';
 import { HighFidelityContainer } from './SettingsContainer/HighFidelityContainer';
 
@@ -19,19 +19,21 @@ export const SettingsButton = ({
   highQualitySettings
 }: CustomSettingsProps): ReactElement => {
   return (
-    <Dropdown
-      appendTo={document.body}
-      content={
-        <Menu>
-          <HighFidelityContainer
-            lowQualitySettings={lowQualitySettings}
-            highQualitySettings={highQualitySettings}
-          />
-          {customSettingsContent ?? <></>}
-        </Menu>
-      }
-      placement="auto">
-      <Button icon="Settings" type="ghost" aria-label="Show settings" />
-    </Dropdown>
+    <CogsTooltip content={'Settings'} placement="right" appendTo={document.body}>
+      <Dropdown
+        appendTo={document.body}
+        content={
+          <Menu>
+            <HighFidelityContainer
+              lowQualitySettings={lowQualitySettings}
+              highQualitySettings={highQualitySettings}
+            />
+            {customSettingsContent ?? <></>}
+          </Menu>
+        }
+        placement="auto">
+        <Button icon="Settings" type="ghost" aria-label="Show settings" />
+      </Dropdown>
+    </CogsTooltip>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/SlicerButton.tsx b/react-components/src/components/RevealToolbar/SlicerButton.tsx
@@ -7,7 +7,7 @@ import { type ReactElement, useState, useEffect } from 'react';
 import { Box3, Plane, Vector3 } from 'three';
 
 import { useReveal } from '../RevealContainer/RevealContext';
-import { Button, Dropdown, Menu, RangeSlider } from '@cognite/cogs.js';
+import { Button, Dropdown, Menu, RangeSlider, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 
 import styled from 'styled-components';
 
@@ -62,24 +62,26 @@ export const SlicerButton = (): ReactElement => {
   }
 
   return (
-    <Dropdown
-      appendTo={() => document.body}
-      content={
-        <StyledMenu>
-          <RangeSlider
-            min={0}
-            max={1}
-            step={0.01}
-            setValue={changeSlicingState}
-            marks={{}}
-            value={[bottomRatio, topRatio]}
-            vertical
-          />
-        </StyledMenu>
-      }
-      placement="right-end">
-      <Button type="ghost" icon="Slice" aria-label="Slice models" />
-    </Dropdown>
+    <CogsTooltip content={'Slice'} placement="right" appendTo={document.body}>
+      <Dropdown
+        appendTo={() => document.body}
+        content={
+          <StyledMenu>
+            <RangeSlider
+              min={0}
+              max={1}
+              step={0.01}
+              setValue={changeSlicingState}
+              marks={{}}
+              value={[bottomRatio, topRatio]}
+              vertical
+            />
+          </StyledMenu>
+        }
+        placement="right-end">
+        <Button type="ghost" icon="Slice" aria-label="Slice models" />
+      </Dropdown>
+    </CogsTooltip>
   );
 };