Replace MUI Tooltip with Oasis UI Library component

Author: buberdds

.changelog/2301.internal.md

@@ -0,0 +1 @@
+Replace MUI Tooltip with Oasis UI Library component

src/app/components/ConsensusTransactionMethod/index.tsx

@@ -13,8 +13,7 @@ import MiscellaneousServicesIcon from '@mui/icons-material/MiscellaneousServices
 import PersonIcon from '@mui/icons-material/Person'
 import PriceChangeIcon from '@mui/icons-material/PriceChange'
 import QuestionMarkIcon from '@mui/icons-material/QuestionMark'
-import Tooltip from '@mui/material/Tooltip'
-import { tooltipDelay } from '../../../styles/theme'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { ConsensusTxMethod, GetConsensusTransactionsParams } from '../../../oasis-nexus/api'
 import { COLORS } from '../../../styles/theme/colors'
 import { exhaustedTypeWarning } from '../../../types/errors'
@@ -142,16 +141,7 @@ const MethodIconWithTruncatedLabel: FC<MethodIconProps> = props => {
   }, [applyTruncate, elementRef, props.label, props.size])
 
   return (
-    <Tooltip
-      arrow
-      placement="top"
-      title={props.label}
-      enterDelay={tooltipDelay}
-      enterNextDelay={tooltipDelay}
-      disableFocusListener={!truncate}
-      disableHoverListener={!truncate}
-      disableTouchListener={!truncate}
-    >
+    <Tooltip title={props.label} disabled={!truncate}>
       <div>
         <MethodIconContent {...props} elementRef={elementRef} truncate={truncate} />
       </div>

src/app/components/Tooltip/MaybeWithTooltip.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 
 type MaybeWithTooltipProps = {
   /**
@@ -24,13 +24,11 @@ type MaybeWithTooltipProps = {
  * A component to display some content with or without a tooltip
  */
 export const MaybeWithTooltip: FC<MaybeWithTooltipProps> = ({ title, children, spanClassName }) => {
+  console.log('title', title)
   return (
     <Tooltip
-      placement="top"
       title={<div className="flex items-center gap-2 md:mx-0 -mx-3 min-w-0 wrap-anywhere">{title}</div>}
-      disableFocusListener={!title}
-      disableHoverListener={!title}
-      disableTouchListener={!title}
+      disabled={!title}
     >
       <span className={spanClassName}>{children}</span>
     </Tooltip>