Add tooltips for settings in left sidebar (#5673)

* [WIP] Add tooltips for settings in left sidebar

* Add remaining tooltips

* changelog

* extract tooltips to messages.js

* reduce code duplication

CHANGELOG.unreleased.md

@@ -15,6 +15,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Added new mesh-related functions to the front-end API: getAvailableMeshFiles, getActiveMeshFile, setActiveMeshFile, loadPrecomputedMesh, computeMeshOnDemand, setMeshVisibility, removeMesh. [#5634](https://github.com/scalableminds/webknossos/pull/5634)
 - Added a route to call new webknossos-worker job for nuclei inferral. [#5626](https://github.com/scalableminds/webknossos/pull/5626)
 - Added the possibility to restrict the volume resolutions when creating explorative annotations. Use this to annotate larger structures without creating tons of high-res data. [#5645](https://github.com/scalableminds/webknossos/pull/5645)
+- Added tooltips for all elements of the Settings tab in the left sidebar. [#5673](https://github.com/scalableminds/webknossos/pull/5673)
 
 ### Changed
 - Improved context menu for interactions with segmentation data which wasn't loaded completely, yet. [#5637](https://github.com/scalableminds/webknossos/pull/5637)

frontend/javascripts/messages.js

@@ -25,7 +25,6 @@ export const settings = {
   zoom: "Zoom",
   renderMissingDataBlack: "Render Missing Data Black",
   clippingDistanceArbitrary: "Clipping Distance",
-  moveValue3d: "Move Value (nm/s)",
   mouseRotateValue: "Mouse Rotation",
   rotateValue: "Keyboard Rotation",
   sphericalCapRadius: "Sphere Radius",
@@ -34,17 +33,42 @@ export const settings = {
   segmentationPatternOpacity: "Pattern Opacity",
   userBoundingBoxes: "Bounding Boxes",
   loadingStrategy: "Loading Strategy",
-  loadingStrategyDescription: `You can choose between loading the best quality first
-    (will take longer until you see data) or alternatively,
-    improving the quality progressively (data will be loaded faster,
-    but it will take more time until the best quality is shown).`,
   mergerMode: "Merger Mode",
   gpuMemoryFactor: "Hardware Utilization",
   autoBrush: "Automatic Brush (Beta)",
   overwriteMode: "Volume Annotation Overwrite Mode",
   useLegacyBindings: "Classic Controls",
 };
 
+export const settingsTooltips = {
+  loadingStrategy: `You can choose between loading the best quality first
+      (will take longer until you see data) or alternatively,
+      improving the quality progressively (data will be loaded faster,
+      but it will take more time until the best quality is shown).`,
+  fourBit:
+    "Decrease size of transferred data by half, using lossy compression. Recommended for poor and/or capped internet connections.",
+  interpolation: "Smooth the rendered data by interpolating color values",
+  renderMissingDataBlack:
+    "If disabled, missing data will be rendered by using downsampled resolutions.",
+  gpuMemoryFactor:
+    "Controls which data resolution is displayed, depending on zoom step and viewport size. Adapt this setting to your hardware, so that rendering quality and performance are balanced. Medium is the default. Choosing a higher setting can result in poor performance.",
+  useLegacyBindings:
+    "When enabled, right-click does not open the context menu in some tools, but instead triggers actions, such as creating nodes or erasing volume data. This setting is only recommended when having experience with these classic mouse and keyboard bindings.",
+  dynamicSpaceDirection:
+    "When enabled, the move direction (shortcuts d/f) changes dynamically to match the direction of the last two created nodes",
+  keyboardDelay:
+    "Delay after which shortcut keys (e.g. d/f for moving) are assumed to be intentionally held down, so that continuous movement is triggered.",
+  moveValue: "Increase to speed up movement through the dataset when holding d/f/space.",
+  displayCrosshair: "Show crosshair marker in the viewing direction center",
+  sphericalCapRadius: "Set the radius of the spherical cap the data is projected on.",
+  crosshairSize: "Size of the crosshair marker in the viewing direction center",
+  rotateValue: "Rotation speed when using the arrow keys on the keyboard",
+  mouseRotateValue: "Rotation speed when using the mouse to drag the rotation.",
+  zoom: "Zoom in or out in the data viewports",
+  zoomFlight: "Zoom in or out in the data viewport",
+  displayScalebars: "Show a scale in the lower-right corner of each viewport",
+};
+
 export const layerViewConfigurations = {
   color: "Color",
   alpha: "Layer opacity",

frontend/javascripts/oxalis/view/components/setting_input_views.js

@@ -15,7 +15,7 @@ const rowGutter = { xs: 8, sm: 16, md: 16, lg: 16 };
 type NumberSliderSettingProps = {
   onChange: (value: number) => void,
   value: number,
-  label: string,
+  label: string | React.Node,
   max: number,
   min: number,
   step: number,
@@ -80,7 +80,7 @@ export class NumberSliderSetting extends React.PureComponent<NumberSliderSetting
 type LogSliderSettingProps = {
   onChange: (value: number) => void,
   value: number,
-  label: string,
+  label: string | React.Node,
   max: number,
   min: number,
   roundTo: number,