[RI-7074] Replace EuiToolTip with RiTooltip

redisinsight/ui/src/components/auto-refresh/AutoRefresh.spec.tsx

@@ -316,15 +316,15 @@ describe('AutoRefresh', () => {
     render(
       <AutoRefresh
         {...instance(mockedProps)}
-        disabled={true}
+        disabled
         disabledRefreshButtonMessage={tooltipText}
       />,
     )
 
-    fireEvent.mouseOver(screen.getByTestId('refresh-btn'))
+    fireEvent.focus(screen.getByTestId('refresh-btn'))
     await screen.findByTestId('refresh-tooltip')
     expect(screen.getByTestId('refresh-tooltip')).toHaveTextContent(
-      new RegExp(`^${tooltipText}$`),
+      new RegExp(`^${tooltipText}`),
     )
   })
 })

redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { EuiIcon, EuiPopover, EuiToolTip } from '@elastic/eui'
+import { EuiIcon, EuiPopover } from '@elastic/eui'
 import cx from 'classnames'
 import { ChevronDownIcon, RefreshIcon } from 'uiSrc/components/base/icons'
 import {
@@ -14,6 +14,7 @@ import { BrowserStorageItem } from 'uiSrc/constants'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { ColorText } from 'uiSrc/components/base/text'
 import { SwitchInput } from 'uiSrc/components/base/inputs'
+import { RiTooltip } from 'uiSrc/components'
 import {
   DEFAULT_REFRESH_RATE,
   DURATION_FIRST_REFRESH_TIME,
@@ -223,7 +224,7 @@ const AutoRefresh = ({
         )}
       </ColorText>
 
-      <EuiToolTip
+      <RiTooltip
         title={!disabled && 'Last Refresh'}
         className={styles.tooltip}
         position="top"
@@ -242,7 +243,7 @@ const AutoRefresh = ({
           aria-labelledby={getDataTestid('refresh-btn')?.replaceAll?.('-', ' ')}
           data-testid={getDataTestid('refresh-btn')}
         />
-      </EuiToolTip>
+      </RiTooltip>
 
       <EuiPopover
         ownFocus={false}

redisinsight/ui/src/components/base/index.ts

@@ -2,3 +2,5 @@ import ExternalLink from './external-link'
 import { HorizontalRule, LoadingContent } from './layout'
 
 export { ExternalLink, HorizontalRule, LoadingContent }
+
+export * from './tooltip'

redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx

@@ -1,8 +1,8 @@
-import { EuiToolTip } from '@elastic/eui'
 import React from 'react'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { CancelSlimIcon, MinusIcon } from 'uiSrc/components/base/icons'
+import { RiTooltip } from 'uiSrc/components'
 
 type Props = {
   onClose: () => void
@@ -22,12 +22,7 @@ export const WindowControlGroup = ({
 }: Props) => (
   <Row gap="m" justify="end">
     <FlexItem>
-      <EuiToolTip
-        content={hideContent}
-        position="top"
-        display="inlineBlock"
-        anchorClassName="flex-row"
-      >
+      <RiTooltip content={hideContent} position="top">
         <IconButton
           size="S"
           icon={MinusIcon}
@@ -36,15 +31,10 @@ export const WindowControlGroup = ({
           data-testid={`hide-${id}`}
           onClick={onHide}
         />
-      </EuiToolTip>
+      </RiTooltip>
     </FlexItem>
     <FlexItem>
-      <EuiToolTip
-        content={closeContent}
-        position="top"
-        display="inlineBlock"
-        anchorClassName="flex-row"
-      >
+      <RiTooltip content={closeContent} position="top">
         <IconButton
           size="S"
           icon={CancelSlimIcon}
@@ -53,7 +43,7 @@ export const WindowControlGroup = ({
           data-testid={`close-${id}`}
           onClick={onClose}
         />
-      </EuiToolTip>
+      </RiTooltip>
     </FlexItem>
   </Row>
 )

redisinsight/ui/src/components/base/text/index.ts

@@ -1,3 +1,4 @@
 export { Text } from './Text'
 export { ColorText } from './ColorText'
 export { HealthText } from './HealthText'
+export { Title } from './Title'

redisinsight/ui/src/components/base/tooltip/HoverContent.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { Col } from 'uiSrc/components/base/layout/flex'
+import { Title } from 'uiSrc/components/base/text'
+
+interface RiTooltipContentProps {
+  title?: React.ReactNode
+  content: React.ReactNode
+}
+
+export const HoverContent = ({ title, content }: RiTooltipContentProps) => (
+  <Col>
+    {title && <Title size="S">{title}</Title>}
+    {content}
+  </Col>
+)

redisinsight/ui/src/components/base/tooltip/RITooltip.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { TooltipProvider, Tooltip, TooltipProps } from '@redis-ui/components'
+import { HoverContent } from './HoverContent'
+
+export interface RiTooltipProps
+  extends Omit<TooltipProps, 'placement' | 'openDelayDuration'> {
+  title?: React.ReactNode
+  position?: TooltipProps['placement']
+  delay?: TooltipProps['openDelayDuration']
+}
+
+export const RiTooltip = ({
+  children,
+  title,
+  content,
+  position,
+  delay,
+  ...props
+}: RiTooltipProps) => (
+  <TooltipProvider>
+    <Tooltip
+      {...props}
+      content={<HoverContent title={title} content={content} />}
+      placement={position}
+      openDelayDuration={delay}
+    >
+      <span>{children}</span>
+    </Tooltip>
+  </TooltipProvider>
+)

redisinsight/ui/src/components/base/tooltip/index.tsx

@@ -0,0 +1 @@
+export * from './RITooltip'

redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { FormikErrors, useFormik } from 'formik'
 import { isEmpty, forEach } from 'lodash'
-import { EuiToolTip, EuiForm } from '@elastic/eui'
+import { EuiForm } from '@elastic/eui'
 import cx from 'classnames'
 
-import { HorizontalRule } from 'uiSrc/components'
+import { HorizontalRule, RiTooltip } from 'uiSrc/components'
 import { compareConsents } from 'uiSrc/utils'
 import {
   updateUserConfigSettingsAction,
@@ -331,12 +331,11 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
           ))}
         </FlexItem>
         <FlexItem>
-          <EuiToolTip
+          <RiTooltip
             position="top"
-            anchorClassName="euiToolTip__btn-disabled"
             content={
               submitIsDisabled() ? (
-                <span className="euiToolTip__content">
+                <span>
                   {Object.values(errors).map((err) => [
                     spec?.agreements[err as string]?.requiredText,
                     <br key={err} />,
@@ -355,7 +354,7 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
             >
               Submit
             </PrimaryButton>
-          </EuiToolTip>
+          </RiTooltip>
         </FlexItem>
       </Row>
     </EuiForm>

redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable sonarjs/no-nested-template-literals */
 import React, { useContext } from 'react'
-import { EuiIcon, EuiToolTip } from '@elastic/eui'
+import { EuiIcon } from '@elastic/eui'
 import cx from 'classnames'
 
 import { Theme } from 'uiSrc/constants'
@@ -12,6 +12,7 @@ import { DEFAULT_MODULES_INFO } from 'uiSrc/constants/modules'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { UnknownDarkIcon, UnknownLightIcon } from 'uiSrc/components/base/icons'
 import { ColorText } from 'uiSrc/components/base/text'
+import { RiTooltip } from 'uiSrc/components'
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 
 import styles from './styles.module.scss'
@@ -141,15 +142,9 @@ const DatabaseListModules = React.memo((props: Props) => {
       !inCircle ? (
         Module(moduleName, abbreviation, icon, content)
       ) : (
-        <EuiToolTip
-          position="bottom"
-          display="inlineBlock"
-          content={Content[i]}
-          anchorClassName={styles.anchorModuleTooltip}
-          key={moduleName}
-        >
+        <RiTooltip position="bottom" content={Content[i]} key={moduleName}>
           <>{Module(moduleName, abbreviation, icon, content)}</>
-        </EuiToolTip>
+        </RiTooltip>
       ),
     )
 
@@ -164,15 +159,14 @@ const DatabaseListModules = React.memo((props: Props) => {
       {inCircle ? (
         Modules()
       ) : (
-        <EuiToolTip
+        <RiTooltip
           position="bottom"
           title={tooltipTitle ?? undefined}
-          display="inlineBlock"
           content={Content}
           data-testid="modules-tooltip"
         >
           <>{content ?? Modules()}</>
-        </EuiToolTip>
+        </RiTooltip>
       )}
     </div>
   )

redisinsight/ui/src/components/database-list-modules/styles.module.scss

@@ -54,7 +54,3 @@
 .abbr {
   vertical-align: text-top;
 }
-
-.anchorModuleTooltip {
-  margin-right: 18px;
-}

redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react'
 import { isString } from 'lodash'
-import { EuiToolTip, IconType } from '@elastic/eui'
+import { IconType } from '@elastic/eui'
+import { RiTooltip } from 'uiSrc/components'
 
 import {
   AddRedisClusterDatabaseOptions,
@@ -88,14 +89,13 @@ const DatabaseListOptions = ({ options }: Props) => {
   }: ITooltipProps) => (
     <>
       {contentProp ? (
-        <EuiToolTip
+        <RiTooltip
           content={
             isString(value)
               ? `Persistence: ${PersistencePolicy[value]}`
               : contentProp
           }
           position="top"
-          anchorClassName={styles.tooltip}
         >
           {icon ? (
             <IconButton
@@ -114,7 +114,7 @@ const DatabaseListOptions = ({ options }: Props) => {
               {contentProp.match(/\b(\w)/g)?.join('')}
             </div>
           )}
-        </EuiToolTip>
+        </RiTooltip>
       ) : null}
     </>
   )

redisinsight/ui/src/components/database-overview/components/OverviewMetrics/MetricItem.tsx

@@ -1,8 +1,9 @@
 import cx from 'classnames'
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip } from '@elastic/eui'
+import { EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'
 import React, { CSSProperties, ReactNode } from 'react'
 import styles from 'uiSrc/components/database-overview/styles.module.scss'
 import { IMetric } from 'uiSrc/components/database-overview/components/OverviewMetrics/OverviewMetrics'
+import { RiTooltip } from 'uiSrc/components'
 
 export interface OverviewItemProps {
   children: ReactNode
@@ -37,7 +38,7 @@ const MetricItem = (
   const { className = '', content, icon, id, tooltipContent, style } = props
   return (
     <OverviewItem id={id} className={className} style={style}>
-      <EuiToolTip
+      <RiTooltip
         position="bottom"
         className={styles.tooltip}
         content={tooltipContent}
@@ -57,7 +58,7 @@ const MetricItem = (
             {content}
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiToolTip>
+      </RiTooltip>
     </OverviewItem>
   )
 }

redisinsight/ui/src/components/formated-date/FormatedDate.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
-import { EuiToolTip } from '@elastic/eui'
 import { DATETIME_FORMATTER_DEFAULT, TimezoneOption } from 'uiSrc/constants'
 import { userSettingsConfigSelector } from 'uiSrc/slices/user/user-settings'
 import { formatTimestamp } from 'uiSrc/utils'
-import styles from './styles.module.scss'
+import { RiTooltip } from 'uiSrc/components'
 
 export interface Props {
   date: Date | string | number
@@ -20,9 +19,9 @@ const FormatedDate = ({ date }: Props) => {
   const formatedDate = formatTimestamp(date, dateFormat, timezone)
 
   return (
-    <EuiToolTip anchorClassName={styles.text} content={formatedDate}>
+    <RiTooltip content={formatedDate}>
       <span>{formatedDate}</span>
-    </EuiToolTip>
+    </RiTooltip>
   )
 }
 

redisinsight/ui/src/components/full-screen/FullScreen.tsx

@@ -1,7 +1,7 @@
-import { EuiToolTip } from '@elastic/eui'
 import React from 'react'
 import { ExtendIcon, ShrinkIcon } from 'uiSrc/components/base/icons'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
+import { RiTooltip } from 'uiSrc/components'
 
 export interface Props {
   isFullScreen: boolean
@@ -16,10 +16,9 @@ const FullScreen = ({
   anchorClassName = '',
   btnTestId = 'toggle-full-screen',
 }: Props) => (
-  <EuiToolTip
+  <RiTooltip
     content={isFullScreen ? 'Exit Full Screen' : 'Full Screen'}
     position="left"
-    anchorClassName={anchorClassName}
   >
     <IconButton
       icon={isFullScreen ? ShrinkIcon : ExtendIcon}
@@ -28,7 +27,7 @@ const FullScreen = ({
       onClick={onToggleFullScreen}
       data-testid={btnTestId}
     />
-  </EuiToolTip>
+  </RiTooltip>
 )
 
 export { FullScreen }