[RI-7074] revert anchorClassName prop usage for RiTooltip

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

@@ -22,7 +22,11 @@ export const WindowControlGroup = ({
 }: Props) => (
   <Row gap="m" justify="end">
     <FlexItem>
-      <RiTooltip content={hideContent} position="top">
+      <RiTooltip
+        content={hideContent}
+        position="top"
+        anchorClassName="flex-row"
+      >
         <IconButton
           size="S"
           icon={MinusIcon}
@@ -34,7 +38,11 @@ export const WindowControlGroup = ({
       </RiTooltip>
     </FlexItem>
     <FlexItem>
-      <RiTooltip content={closeContent} position="top">
+      <RiTooltip
+        content={closeContent}
+        position="top"
+        anchorClassName="flex-row"
+      >
         <IconButton
           size="S"
           icon={CancelSlimIcon}

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

@@ -8,6 +8,7 @@ export interface RiTooltipProps
   title?: React.ReactNode
   position?: TooltipProps['placement']
   delay?: TooltipProps['openDelayDuration']
+  anchorClassName?: string
 }
 
 export const RiTooltip = ({
@@ -16,6 +17,7 @@ export const RiTooltip = ({
   content,
   position,
   delay,
+  anchorClassName,
   ...props
 }: RiTooltipProps) => (
   <TooltipProvider>
@@ -25,7 +27,7 @@ export const RiTooltip = ({
       placement={position}
       openDelayDuration={delay}
     >
-      <span>{children}</span>
+      <span className={anchorClassName}>{children}</span>
     </Tooltip>
   </TooltipProvider>
 )

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

@@ -17,7 +17,6 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { InfoIcon } from 'uiSrc/components/base/icons'
 import { Title } from 'uiSrc/components/base/text/Title'
-import { CallOut } from 'uiSrc/components/base/display/call-out/CallOut'
 import { Text } from 'uiSrc/components/base/text'
 import { SwitchInput } from 'uiSrc/components/base/inputs'
 import { Link } from 'uiSrc/components/base/link/Link'
@@ -330,6 +329,7 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
         <FlexItem>
           <RiTooltip
             position="top"
+            anchorClassName="euiToolTip__btn-disabled"
             content={
               submitIsDisabled() ? (
                 <span>

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

@@ -142,9 +142,14 @@
       !inCircle ? (
         Module(moduleName, abbreviation, icon, content)
       ) : (
-        <RiTooltip position="bottom" content={Content[i]} key={moduleName}>
+        <RiTooltip
+          position="bottom"
+          content={Content[i]}
+          anchorClassName={styles.anchorModuleTooltip}
+          key={moduleName}
+        >
           <>{Module(moduleName, abbreviation, icon, content)}</>
         </RiTooltip>
       ),
     )
 

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

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

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

@@ -96,6 +96,7 @@ const DatabaseListOptions = ({ options }: Props) => {
               : contentProp
           }
           position="top"
+          anchorClassName={styles.tooltip}
         >
           {icon ? (
             <IconButton

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

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

redisinsight/ui/src/components/formated-date/styles.module.scss

@@ -0,0 +1,9 @@
+.text {
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  max-width: 100%;
+  vertical-align: middle;
+}

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

@@ -19,6 +19,7 @@ const FullScreen = ({
   <RiTooltip
     content={isFullScreen ? 'Exit Full Screen' : 'Full Screen'}
     position="left"
+    anchorClassName={anchorClassName}
   >
     <IconButton
       icon={isFullScreen ? ShrinkIcon : ExtendIcon}

redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx

@@ -165,6 +165,7 @@ const InlineItemEditor = (props: Props) => {
 
   const ApplyBtn = (
     <RiTooltip
+      anchorClassName={styles.tooltip}
       position="bottom"
       title={
         (isDisabled && disabledTooltipText?.title) ||

redisinsight/ui/src/components/instance-header/InstanceHeader.tsx

@@ -266,6 +266,7 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
                   <FlexItem style={{ paddingLeft: 6 }}>
                     <RiTooltip
                       position="right"
+                      anchorClassName={styles.tooltipAnchor}
                       className={styles.tooltip}
                       content={
                         <ShortInstanceInfo

redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import cx from 'classnames'
 import { useParams } from 'react-router-dom'
 import { EuiIcon } from '@elastic/eui'
 
@@ -100,6 +101,7 @@ const MonitorHeader = ({ handleRunMonitor }: Props) => {
                     ? 'Pause'
                     : 'Resume'
               }
+              anchorClassName="inline-flex"
             >
               <IconButton
                 icon={
@@ -119,6 +121,9 @@ const MonitorHeader = ({ handleRunMonitor }: Props) => {
               content={
                 !isStarted || !items.length ? '' : 'Clear Profiler Window'
               }
+              anchorClassName={cx('inline-flex', {
+                transparent: !isStarted || !items.length,
+              })}
             >
               <IconButton
                 icon={DeleteIcon}

redisinsight/ui/src/components/multi-search/MultiSearch.tsx

@@ -302,6 +302,7 @@ const MultiSearch = (props: Props) => {
           {disableSubmit && (
             <RiTooltip
               position="top"
+              anchorClassName={styles.anchorSubmitBtn}
               content="Please choose index in order to preform the search"
             >
               {SubmitBtn()}

redisinsight/ui/src/components/oauth/shared/oauth-form/components/oauth-sso-form/OAuthSsoForm.tsx

@@ -61,6 +61,7 @@ const OAuthSsoForm = ({ onBack, onSubmit }: Props) => {
   }) => (
     <RiTooltip
       position="top"
+      anchorClassName="euiToolTip__btn-disabled"
       data-testid="btn-submit-tooltip"
       content={
         disabled ? (

redisinsight/ui/src/components/oauth/shared/oauth-recommended-settings/OAuthRecommendedSettings.tsx

@@ -35,6 +35,7 @@ const OAuthRecommendedSettings = (props: Props) => {
             </>
           }
           position="top"
+          anchorClassName={styles.recommendedSettingsToolTip}
         >
           <EuiIcon type="iInCircle" size="s" />
         </RiTooltip>

redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx

@@ -60,6 +60,7 @@ const OAuthSocialButtons = (props: Props) => {
         <RiTooltip
           key={label}
           position="top"
+          anchorClassName={!agreement ? 'euiToolTip__btn-disabled' : ''}
           content={agreement ? null : 'Acknowledge the agreement'}
           data-testid={`${label}-tooltip`}
         >

redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx

@@ -251,7 +251,11 @@ const QueryCardHeader = (props: Props) => {
       disabled: false,
       inputDisplay: (
         <div className={styles.changeViewWrapper}>
-          <RiTooltip content={truncateText(text, 500)} position="left">
+          <RiTooltip
+            content={truncateText(text, 500)}
+            position="left"
+            anchorClassName={styles.changeViewWrapper}
+          >
             <EuiIcon
               className={styles.iconDropdownOption}
               type={theme === Theme.Dark ? iconDark : iconLight}
@@ -390,6 +394,7 @@ const QueryCardHeader = (props: Props) => {
                   title="Processing Time"
                   content={getExecutionTimeString(executionTime)}
                   position="left"
+                  anchorClassName={styles.executionTime}
                   data-testid="execution-time-tooltip"
                 >
                   <>
@@ -481,7 +486,11 @@ const QueryCardHeader = (props: Props) => {
             </FlexItem>
             {!isFullScreen && (
               <FlexItem className={cx(styles.buttonIcon, styles.playIcon)}>
-                <RiTooltip content="Run again" position="left">
+                <RiTooltip
+                  content="Run again"
+                  position="left"
+                  anchorClassName={cx(styles.buttonIcon, styles.playIcon)}
+                >
                   <IconButton
                     disabled={emptyCommand}
                     icon={PlayIcon}
@@ -506,6 +515,7 @@ const QueryCardHeader = (props: Props) => {
               {(isRawMode(mode) || isGroupResults(resultsMode)) && (
                 <RiTooltip
                   className={styles.tooltip}
+                  anchorClassName={styles.buttonIcon}
                   content={
                     <>
                       {isGroupMode(resultsMode) && (

redisinsight/ui/src/components/query/query-card/QueryCardTooltip/QueryCardTooltip.tsx

@@ -72,6 +72,7 @@ const QueryCardTooltip = (props: Props) => {
   return (
     <RiTooltip
       className={styles.tooltip}
+      anchorClassName={styles.tooltipAnchor}
       content={<>{contentItems}</>}
       position="bottom"
     >

redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.tsx

@@ -16,7 +16,7 @@ const BadgeIcon = ({ id, icon, name }: Props) => (
     data-testid={`recommendation-badge-${id}`}
   >
     <div data-testid={id} className={styles.badgeWrapper}>
-      <RiTooltip content={name} position="top">
+      <RiTooltip content={name} position="top" anchorClassName="flex-row">
         {icon}
       </RiTooltip>
     </div>

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx

@@ -63,11 +63,14 @@
   return (
     <div className={styles.header}>
       {connectedInstanceName ? (
-        <RiTooltip content={connectedInstanceName}>
+        <RiTooltip
+          content={connectedInstanceName}
+          anchorClassName={styles.dbName}
+        >
           <Text size="xs" className="truncateText">
             {connectedInstanceName}
           </Text>
         </RiTooltip>
       ) : (
         <span />
       )}
@@ -78,6 +81,7 @@
               ? undefined
               : 'Open relevant tutorials to learn more'
           }
+          anchorClassName={styles.headerBtnAnchor}
           position="bottom"
         >
           <EuiPopover

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalLink/InternalLink.tsx

@@ -45,7 +45,7 @@ const InternalLink = (props: Props) => {
   }
 
   const content = (
-    <RiTooltip content={toolTip}>
+    <RiTooltip content={toolTip} anchorClassName={styles.content}>
       <span className={styles.content}>
         <div className={styles.title}>{children || label}</div>
         {!!summary && (

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx

@@ -115,6 +115,7 @@ const UploadTutorialForm = (props: Props) => {
               </SecondaryButton>
               <RiTooltip
                 position="top"
+                anchorClassName="euiToolTip__btn-disabled"
                 title={
                   isSubmitDisabled
                     ? validationErrors.REQUIRED_TITLE(

redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/LiveTimeRecommendations.tsx

@@ -145,6 +145,7 @@ const LiveTimeRecommendations = () => {
         <RiTooltip
           position="bottom"
           className={styles.tooltip}
+          anchorClassName={styles.tooltipAnchor}
           content={
             <>
               Tips will help you improve your database.

redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.tsx

@@ -89,7 +89,11 @@ const RecommendationTitle = ({
             className={styles.redisStackLink}
             data-testid={`${id}-redis-stack-link`}
           >
-            <RiTooltip content="Redis Stack" position="top">
+            <RiTooltip
+              content="Redis Stack"
+              position="top"
+              anchorClassName="flex-row"
+            >
               <EuiIcon
                 type={
                   theme === Theme.Dark ? RediStackDarkMin : RediStackLightMin
@@ -248,6 +252,7 @@ const Recommendation = ({
             title="Snooze tip"
             content="This tip will be removed from the list and displayed again when relevant."
             position="top"
+            anchorClassName="flex-row"
           >
             <IconButton
               icon={SnoozeIcon}
@@ -267,6 +272,7 @@ const Recommendation = ({
                 : 'This tip will be removed from the list and not displayed again.'
             }`}
             position="top"
+            anchorClassName="flex-row"
           >
             <IconButton
               icon={hide ? HideIcon : ShowIcon}

redisinsight/ui/src/packages/redisearch/src/components/TableResult/TableResult.tsx

@@ -79,6 +79,7 @@ const TableResult = React.memo((props: Props) => {
                 position="bottom"
                 title={title}
                 className="text-multiline-ellipsis"
+                anchorClassName={cx('tooltip')}
                 content={formatLongName(value.toString())}
               >
                 <div className="copy-btn-wrapper">

redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResultPage.tsx

@@ -76,18 +76,19 @@
         },
       }) {
         const cellContent = replaceSpaces(name.substring(0, 200))
         return (
           <div role="presentation" data-testid={`db_name_${name}`}>
             <RiTooltip
               position="bottom"
               title="Database"
               className={styles.tooltipColumnName}
+              anchorClassName="truncateText"
               content={formatLongName(name)}
             >
               <Text>{cellContent}</Text>
             </RiTooltip>
           </div>
         )
       },
     },
     {
@@ -107,18 +108,19 @@
         },
       }) {
         const cellContent = replaceSpaces(name.substring(0, 200))
         return (
           <div role="presentation">
             <RiTooltip
               position="bottom"
               title="Subscription"
               className={styles.tooltipColumnName}
+              anchorClassName="truncateText"
               content={formatLongName(name)}
             >
               <Text>{cellContent}</Text>
             </RiTooltip>
           </div>
         )
       },
     },
     {
@@ -149,19 +151,19 @@
         },
       }) {
         const text = publicEndpoint
         return (
           <div className="public_endpoint">
             <Text className="copyPublicEndpointText">{text}</Text>
-            <RiTooltip position="right" content="Copy">
+            <RiTooltip position="right" content="Copy" anchorClassName="copyPublicEndpointTooltip">
               <IconButton
                 icon={CopyIcon}
                 aria-label="Copy public endpoint"
                 className="copyPublicEndpointBtn"
                 onClick={() => handleCopy(text)}
               />
             </RiTooltip>
           </div>
         )
       },
     },
     {
@@ -200,27 +202,27 @@
           original: { statusAdded, messageAdded },
         },
       }) {
         return (
           <>
             {statusAdded === AddRedisDatabaseStatus.Success ? (
               <Text>{messageAdded}</Text>
             ) : (
-              <RiTooltip position="left" title="Error" content={messageAdded}>
+              <RiTooltip position="left" title="Error" content={messageAdded} anchorClassName="truncateText">
                 <Row align="center" gap="s">
                   <FlexItem>
                     <EuiIcon type="alert" color="danger" />
                   </FlexItem>
 
                   <FlexItem>
                     <ColorText
                       color="danger"
                       className="flex-row euiTextAlign--center"
                     >
                       Error
                     </ColorText>
                   </FlexItem>
                 </Row>
               </RiTooltip>
             )}
           </>
         )

redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx

@@ -167,6 +167,7 @@ const RedisCloudDatabasesPage = ({
   const SubmitButton = ({ isDisabled }: { isDisabled: boolean }) => (
     <RiTooltip
       position="top"
+      anchorClassName="euiToolTip__btn-disabled"
       title={
         isDisabled ? validationErrors.SELECT_AT_LEAST_ONE('database') : null
       }