fix: DEV-1561: Tooltips for zoom inside audio annotations (#453)

* fix: DEV-1561: Add missed tooltips on zoom controls in audio annotation

* Update Waveform.js

Co-authored-by: Max Tkachenko <[email protected]>

Author: Gondragos

src/components/Waveform/Waveform.js

@@ -11,6 +11,7 @@ import { Col, Row, Select, Slider } from "antd";
 import { SoundOutlined } from "@ant-design/icons";
 import messages from "../../utils/messages";
 import { Hotkey } from "../../core/Hotkey";
+import { Tooltip } from "../../common/Tooltip/Tooltip";
 
 const MIN_ZOOM_Y = 1;
 const MAX_ZOOM_Y = 50;
@@ -452,7 +453,9 @@ export default class Waveform extends React.Component {
             <Col flex={8} style={{ textAlign: "right", marginTop: "6px" }}>
               <div style={{ display: "flex" }}>
                 <div style={{ marginTop: "6px", marginRight: "5px" }}>
-                  <ZoomOutOutlined onClick={this.onZoomMinus} className={globalStyles.link} />
+                  <Tooltip placement="topLeft" title="Horizontal zoom out">
+                    <ZoomOutOutlined onClick={this.onZoomMinus} className={globalStyles.link} />
+                  </Tooltip>
                 </div>
                 <div style={{ width: "100%" }}>
                   <Slider
@@ -466,14 +469,18 @@ export default class Waveform extends React.Component {
                   />
                 </div>
                 <div style={{ marginTop: "6px", marginLeft: "5px" }}>
-                  <ZoomInOutlined onClick={this.onZoomPlus} className={globalStyles.link} />
+                  <Tooltip placement="topLeft" title="Horizontal zoom in">
+                    <ZoomInOutlined onClick={this.onZoomPlus} className={globalStyles.link} />
+                  </Tooltip>
                 </div>
               </div>
             </Col>
             <Col flex={4} style={{ textAlign: "right", marginTop: "6px" }}>
               <div style={{ display: "flex" }}>
                 <div style={{ marginTop: "6px", marginRight: "5px" }}>
-                  <ZoomOutOutlined onClick={this.onZoomYMinus} className={globalStyles.link} />
+                  <Tooltip placement="topLeft" title="Vertical zoom out">
+                    <ZoomOutOutlined onClick={this.onZoomYMinus} className={globalStyles.link} />
+                  </Tooltip>
                 </div>
                 <div style={{ width: "100%" }}>
                   <Slider
@@ -487,7 +494,9 @@ export default class Waveform extends React.Component {
                   />
                 </div>
                 <div style={{ marginTop: "6px", marginLeft: "5px" }}>
-                  <ZoomInOutlined onClick={this.onZoomYPlus} className={globalStyles.link} />
+                  <Tooltip placement="topLeft" title="Vertical zoom in">
+                    <ZoomInOutlined onClick={this.onZoomYPlus} className={globalStyles.link} />
+                  </Tooltip>
                 </div>
               </div>
             </Col>