add custom tooltip to search

libs/remix-ui/search/src/lib/components/Find.tsx

@@ -1,3 +1,4 @@
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import { SearchContext } from '../context/context'
 
@@ -42,9 +43,14 @@ export const Find = () => {
             onKeyUp={handleKeypress}
           ></input>
           <div className="search_plugin_controls">
+            <CustomTooltip
+              tooltipText="Match Case"
+              tooltipClasses="text-nowrap"
+              tooltipId="searchCaseSensitiveTooltip"
+              placement="top-start"
+            >
               <div
                 data-id="search_case_sensitive"
-              title="Match Case"
                 className={`monaco-custom-checkbox codicon codicon-case-sensitive ${
                   state.casesensitive ? 'checked' : ''
                 }`}
@@ -56,9 +62,15 @@ export const Find = () => {
                   toggleCaseSensitive()
                 }}
               ></div>
+            </CustomTooltip>
+            <CustomTooltip
+              tooltipText="Match Whole Word"
+              tooltipClasses="text-nowrap"
+              tooltipId="searchWholeWordTooltip"
+              placement="top-start"
+            >
               <div
                 data-id="search_whole_word"
-              title="Match Whole Word"
                 className={`monaco-custom-checkbox codicon codicon-whole-word ${
                   state.matchWord ? 'checked' : ''
                 }`}
@@ -70,9 +82,15 @@ export const Find = () => {
                   toggleMatchWholeWord()
                 }}
               ></div>
+            </CustomTooltip>
+            <CustomTooltip
+              tooltipText="Use Regular Expression"
+              tooltipClasses="text-nowrap"
+              tooltipId="useRegularExpressionTooltip"
+              placement="bottom-start"
+            >
               <div
                 data-id="search_use_regex"
-              title="Use Regular Expression"
                 className={`monaco-custom-checkbox codicon codicon-regex ${
                   state.useRegExp ? 'checked' : ''
                 }`}
@@ -84,6 +102,7 @@ export const Find = () => {
                   toggleUseRegex()
                 }}
               ></div>
+            </CustomTooltip>
           </div>
         </div>
       </div>

libs/remix-ui/search/src/lib/components/FindContainer.tsx

@@ -1,3 +1,4 @@
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useContext, useEffect, useState } from 'react'
 import { SearchContext } from '../context/context'
 import { Find } from './Find'
@@ -13,8 +14,13 @@ export const FindContainer = props => {
   }, [expanded])
   return (
     <div className="search_plugin_find_container">
+      <CustomTooltip
+        tooltipText="Toggle Replace"
+        tooltipClasses="text-nowrap"
+        tooltipId="toggleReplaceTooltip"
+        placement="left-start"
+      >
         <div
-        title="Toggle Replace"
           data-id="toggle_replace"
           className={`codicon codicon-find-${
             expanded ? 'expanded' : 'collapsed'
@@ -25,6 +31,7 @@ export const FindContainer = props => {
           aria-expanded="true"
           aria-disabled="false"
         ></div>
+      </CustomTooltip>
       <div className="search_plugin_find_container_internal">
         <Find></Find>
         {expanded ? 

libs/remix-ui/search/src/lib/components/results/ResultFileName.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { SearchResult } from '../../types'
-import { getPathIcon } from '@remix-ui/helper'
+import { CustomTooltip, getPathIcon } from '@remix-ui/helper'
 import * as path from 'path'
 interface ResultItemProps {
   file: SearchResult
@@ -18,10 +18,17 @@ export const ResultFileName = (props: ResultItemProps) => {
   return (
     <>
       {icon ? <div className={`${icon} caret caret_tv`}></div> : null}
+      <CustomTooltip
+        tooltipText={props.file.filename}
+        tooltipClasses="text-nowrap"
+        tooltipId="resultFileNameTooltip"
+        placement="top-start"
+      >
         <div title={props.file.filename} className="search_plugin_search_file_name ml-2">
           {path.basename(props.file.path)}
           <span className='pl-1 text-muted text-lowercase'>{path.dirname(props.file.path)}</span>
         </div>
+      </CustomTooltip>
     </>
   )
 }

libs/remix-ui/search/src/lib/components/results/ResultSummary.tsx

@@ -1,5 +1,6 @@
 
 import { useDialogDispatchers } from '@remix-ui/app'
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useContext } from 'react'
 import { SearchContext } from '../../context/context'
 import { SearchResult, SearchResultLine, SearchResultLineLine } from '../../types'
@@ -53,9 +54,16 @@ export const ResultSummary = (props: ResultSummaryProps) => {
         </div>
         {state.replaceEnabled?
         <div className='search_plugin_search_control'>
-        <div title="Replace" data-id={`replace-${props.searchResult.filename}-${lineItem.position.start.line}-${lineItem.position.start.column}`} onClick={async () => {
+        <CustomTooltip
+          tooltipText="Replace"
+          tooltipClasses="text-nowrap"
+          tooltipId="replaceTooltip"
+          placement="top-start"
+        >
+          <div data-id={`replace-${props.searchResult.filename}-${lineItem.position.start.line}-${lineItem.position.start.column}`} onClick={async () => {
               replace(lineItem)
             }} className="codicon codicon-find-replace" role="button" aria-label="Replace" aria-disabled="false"></div>
+        </CustomTooltip>
         </div>:null}
         </div>
       ))}