fix: Make popup on the Search input field less intrusive enhancement (#…

…1685)

<!--
!! Please DELETE this comment before posting.
We appreciate your contribution to the Jaeger project! 👋🎉
-->

## Which problem is this PR solving?
- <!-- Example: Resolves #123 -->
#1651 
![Screenshot 2023-08-16
230437](https://github.com/jaegertracing/jaeger-ui/assets/81948346/84809799-4a3a-4ba5-8c60-10d1658d1912)


## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [ ] I have added unit tests for the new functionality
- [x] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `yarn lint` and `yarn test`

---------

Signed-off-by: Anik Dhabal Babu <[email protected]>

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.css

@@ -43,3 +43,18 @@ limitations under the License.
 .TracePageSearchBar--locateBtn {
   padding: 1px 8px 4px;
 }
+.help-btn-container {
+  border: 1px solid gainsboro;
+  padding: 3px 7px;
+}
+.help-btn-container:hover {
+  border-top-color: rgb(23, 184, 190);
+  border-bottom-color: rgb(23, 184, 190);
+}
+.help-button {
+  border: 1px solid #999;
+  border-radius: 100px;
+  color: #999;
+  cursor: pointer;
+  padding: 1px;
+}

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx

@@ -17,11 +17,11 @@ import { Button, Input, Tooltip } from 'antd';
 import cx from 'classnames';
 import IoAndroidLocate from 'react-icons/lib/io/android-locate';
 
+import IoHelp from 'react-icons/lib/io/help';
 import * as markers from './TracePageSearchBar.markers';
 import { trackFilter } from '../index.track';
 import UiFindInput from '../../common/UiFindInput';
 import { TNil } from '../../../types';
-
 import './TracePageSearchBar.css';
 
 type TracePageSearchBarProps = {
@@ -80,55 +80,58 @@ export function TracePageSearchBarFn(props: TracePageSearchBarProps & { forwarde
 
   return (
     <div className="TracePageSearchBar">
-      <Tooltip
-        arrowPointAtCenter
-        mouseLeaveDelay={0.5}
-        placement="bottom"
-        overlayStyle={{ maxWidth: '600px' }} // This is a large tooltip and the default is too narrow.
-        title={renderTooltip()}
-      >
-        {/* style inline because compact overwrites the display */}
-        <Input.Group className="ub-justify-end" compact style={{ display: 'flex' }}>
-          <UiFindInput
-            inputProps={uiFindInputInputProps}
-            forwardedRef={forwardedRef}
-            trackFindFunction={trackFilter}
-          />
-          {navigable && (
-            <>
-              <Button
-                className={cx(btnClass, 'TracePageSearchBar--locateBtn')}
-                disabled={!textFilter}
-                htmlType="button"
-                onClick={focusUiFindMatches}
-              >
-                <IoAndroidLocate />
-              </Button>
-              <Button
-                className={btnClass}
-                disabled={!textFilter}
-                htmlType="button"
-                icon="up"
-                onClick={prevResult}
-              />
-              <Button
-                className={btnClass}
-                disabled={!textFilter}
-                htmlType="button"
-                icon="down"
-                onClick={nextResult}
-              />
-            </>
-          )}
-          <Button
-            className={btnClass}
-            disabled={!textFilter}
-            htmlType="button"
-            icon="close"
-            onClick={clearSearch}
-          />
-        </Input.Group>
-      </Tooltip>
+      {/* style inline because compact overwrites the display */}
+      <Input.Group className="ub-justify-end" compact style={{ display: 'flex' }}>
+        <UiFindInput
+          inputProps={uiFindInputInputProps}
+          forwardedRef={forwardedRef}
+          trackFindFunction={trackFilter}
+        />
+        <Tooltip
+          arrowPointAtCenter
+          placement="bottomLeft"
+          trigger="hover"
+          overlayStyle={{ maxWidth: '600px' }} // This is a large tooltip and the default is too narrow.
+          title={renderTooltip()}
+        >
+          <div className="help-btn-container">
+            <IoHelp className="help-button" />
+          </div>
+        </Tooltip>
+        {navigable && (
+          <>
+            <Button
+              className={cx(btnClass, 'TracePageSearchBar--locateBtn')}
+              disabled={!textFilter}
+              htmlType="button"
+              onClick={focusUiFindMatches}
+            >
+              <IoAndroidLocate />
+            </Button>
+            <Button
+              className={btnClass}
+              disabled={!textFilter}
+              htmlType="button"
+              icon="up"
+              onClick={prevResult}
+            />
+            <Button
+              className={btnClass}
+              disabled={!textFilter}
+              htmlType="button"
+              icon="down"
+              onClick={nextResult}
+            />
+          </>
+        )}
+        <Button
+          className={btnClass}
+          disabled={!textFilter}
+          htmlType="button"
+          icon="close"
+          onClick={clearSearch}
+        />
+      </Input.Group>
     </div>
   );
 }