feat: tooltip (#7634)

2024-08-26 13:00:02 +08:00
parent 1ba3d3acd6
commit 3be756eaed
93 changed files with 640 additions and 758 deletions
--- a/web/app/components/base/audio-btn/index.tsx
+++ b/web/app/components/base/audio-btn/index.tsx
@@ -83,25 +83,25 @@ const AudioBtn = ({
  }[audioState]

  return (
-    <div className={`${(audioState === 'loading' || audioState === 'playing') ? 'mr-1' : className}`}>
+    <div className={`inline-flex items-center justify-center ${(audioState === 'loading' || audioState === 'playing') ? 'mr-1' : className}`}>
      <Tooltip
-        selector={selector.current}
-        content={tooltipContent}
-        className='z-10'
+        popupContent={tooltipContent}
      >
        <button
          disabled={audioState === 'loading'}
-          className={`box-border p-0.5 flex items-center justify-center cursor-pointer ${isAudition || '!p-0 rounded-md bg-white'}`}
+          className={`box-border w-6 h-6 flex items-center justify-center cursor-pointer ${isAudition ? 'p-0.5' : 'p-0 rounded-md bg-white'}`}
          onClick={handleToggle}
        >
          {audioState === 'loading'
            ? (
-              <div className='w-6 h-6 rounded-md flex items-center justify-center p-2'>
+              <div className='w-full h-full rounded-md flex items-center justify-center'>
                <Loading />
              </div>
            )
            : (
-              <div className={`w-6 h-6 rounded-md ${!isAudition ? 'w-4 h-4 hover:bg-gray-50' : 'hover:bg-gray-50'} ${(audioState === 'playing') ? s.pauseIcon : s.playIcon}`}></div>
+              <div className={`w-full h-full rounded-md flex items-center justify-center ${!isAudition ? 'hover:bg-gray-50' : 'hover:bg-gray-50'}`}>
+                <div className={`w-4 h-4 ${(audioState === 'playing') ? s.pauseIcon : s.playIcon}`}></div>
+              </div>
            )}
        </button>
      </Tooltip>
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -17,7 +17,7 @@ import {
  ThumbsDown,
  ThumbsUp,
 } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import Log from '@/app/components/base/chat/chat/log'

 type OperationProps = {
@@ -162,28 +162,34 @@ const Operation: FC<OperationProps> = ({
        {
          config?.supportFeedback && !localFeedback?.rating && onFeedback && !isOpeningStatement && (
            <div className='hidden group-hover:flex ml-1 shrink-0 items-center px-0.5 bg-white border-[0.5px] border-gray-100 shadow-md text-gray-500 rounded-lg'>
-              <TooltipPlus popupContent={t('appDebug.operation.agree')}>
+              <Tooltip
+                popupContent={t('appDebug.operation.agree')}
+              >
                <div
                  className='flex items-center justify-center mr-0.5 w-6 h-6 rounded-md hover:bg-black/5 hover:text-gray-800 cursor-pointer'
                  onClick={() => handleFeedback('like')}
                >
                  <ThumbsUp className='w-4 h-4' />
                </div>
-              </TooltipPlus>
-              <TooltipPlus popupContent={t('appDebug.operation.disagree')}>
+              </Tooltip>
+              <Tooltip
+                popupContent={t('appDebug.operation.disagree')}
+              >
                <div
                  className='flex items-center justify-center w-6 h-6 rounded-md hover:bg-black/5 hover:text-gray-800 cursor-pointer'
                  onClick={() => handleFeedback('dislike')}
                >
                  <ThumbsDown className='w-4 h-4' />
                </div>
-              </TooltipPlus>
+              </Tooltip>
            </div>
          )
        }
        {
          config?.supportFeedback && localFeedback?.rating && onFeedback && !isOpeningStatement && (
-            <TooltipPlus popupContent={localFeedback.rating === 'like' ? t('appDebug.operation.cancelAgree') : t('appDebug.operation.cancelDisagree')}>
+            <Tooltip
+              popupContent={localFeedback.rating === 'like' ? t('appDebug.operation.cancelAgree') : t('appDebug.operation.cancelDisagree')}
+            >
              <div
                className={`
                  flex items-center justify-center w-7 h-7 rounded-[10px] border-[2px] border-white cursor-pointer
@@ -203,7 +209,7 @@ const Operation: FC<OperationProps> = ({
                  )
                }
              </div>
-            </TooltipPlus>
+            </Tooltip>
          )
        }
      </div>
--- a/web/app/components/base/chat/chat/chat-input.tsx
+++ b/web/app/components/base/chat/chat/chat-input.tsx
@@ -17,7 +17,7 @@ import { TransferMethod } from '../types'
 import { useChatWithHistoryContext } from '../chat-with-history/context'
 import type { Theme } from '../embedded-chatbot/theme/theme-context'
 import { CssTransform } from '../embedded-chatbot/theme/utils'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import { ToastContext } from '@/app/components/base/toast'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import VoiceInput from '@/app/components/base/voice-input'
@@ -220,7 +220,7 @@ const ChatInput: FC<ChatInputProps> = ({
            {isMobile
              ? sendBtn
              : (
-                <TooltipPlus
+                <Tooltip
                  popupContent={
                    <div>
                      <div>{t('common.operation.send')} Enter</div>
@@ -229,7 +229,7 @@ const ChatInput: FC<ChatInputProps> = ({
                  }
                >
                  {sendBtn}
-                </TooltipPlus>
+                </Tooltip>
              )}
          </div>
          {
--- a/web/app/components/base/chat/embedded-chatbot/header.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header.tsx
@@ -41,9 +41,7 @@ const Header: FC<IHeaderProps> = ({
        </div>
      </div>
      <Tooltip
-        selector={'embed-scene-restart-button'}
-        htmlContent={t('share.chat.resetChat')}
-        position='top'
+        popupContent={t('share.chat.resetChat')}
      >
        <div className='flex cursor-pointer hover:rounded-lg hover:bg-black/5 w-8 h-8 items-center justify-center' onClick={() => {
          onCreateNewChat?.()
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@@ -88,9 +88,7 @@ const Chatbot = () => {
              {!isMobile && (
                <div className='absolute top-2.5 right-3 z-20'>
                  <Tooltip
-                    selector={'embed-scene-restart-button'}
-                    htmlContent={t('share.chat.resetChat')}
-                    position='top'
+                    popupContent={t('share.chat.resetChat')}
                  >
                    <div className='p-1.5 bg-white border-[0.5px] border-gray-100 rounded-lg shadow-md cursor-pointer' onClick={handleNewConversation}>
                      <RiLoopLeftLine className="h-4 w-4 text-gray-500"/>
--- a/web/app/components/base/copy-btn/index.tsx
+++ b/web/app/components/base/copy-btn/index.tsx
@@ -1,10 +1,9 @@
 'use client'
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 import { t } from 'i18next'
 import copy from 'copy-to-clipboard'
 import s from './style.module.css'
 import Tooltip from '@/app/components/base/tooltip'
-import { randomString } from '@/utils'

 type ICopyBtnProps = {
  value: string
@@ -18,14 +17,11 @@ const CopyBtn = ({
  isPlain,
 }: ICopyBtnProps) => {
  const [isCopied, setIsCopied] = useState(false)
-  const selector = useRef(`copy-tooltip-${randomString(4)}`)

  return (
    <div className={`${className}`}>
      <Tooltip
-        selector={selector.current}
-        content={(isCopied ? t('appApi.copied') : t('appApi.copy')) as string}
-        className='z-10'
+        popupContent={(isCopied ? t('appApi.copied') : t('appApi.copy'))}
      >
        <div
          className={'box-border p-0.5 flex items-center justify-center rounded-md bg-white cursor-pointer'}
--- a/web/app/components/base/copy-feedback/index.tsx
+++ b/web/app/components/base/copy-feedback/index.tsx
@@ -3,19 +3,17 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { debounce } from 'lodash-es'
 import copy from 'copy-to-clipboard'
-import Tooltip from '../tooltip'
-import TooltipPlus from '../tooltip-plus'
 import copyStyle from './style.module.css'
+import Tooltip from '@/app/components/base/tooltip'

 type Props = {
  content: string
-  selectorId: string
  className?: string
 }

 const prefixEmbedded = 'appOverview.overview.appInfo.embedded'

-const CopyFeedback = ({ content, selectorId, className }: Props) => {
+const CopyFeedback = ({ content, className }: Props) => {
  const { t } = useTranslation()
  const [isCopied, setIsCopied] = useState<boolean>(false)

@@ -30,8 +28,7 @@ const CopyFeedback = ({ content, selectorId, className }: Props) => {

  return (
    <Tooltip
-      selector={`common-copy-feedback-${selectorId}`}
-      content={
+      popupContent={
        (isCopied
          ? t(`${prefixEmbedded}.copied`)
          : t(`${prefixEmbedded}.copy`)) || ''
@@ -41,10 +38,10 @@ const CopyFeedback = ({ content, selectorId, className }: Props) => {
        className={`w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg ${
          className ?? ''
        }`}
-        onMouseLeave={onMouseLeave}
      >
        <div
          onClick={onClickCopy}
+          onMouseLeave={onMouseLeave}
          className={`w-full h-full ${copyStyle.copyIcon} ${
            isCopied ? copyStyle.copied : ''
          }`}
@@ -70,7 +67,7 @@ export const CopyFeedbackNew = ({ content, className }: Pick<Props, 'className'
  }, 100)

  return (
-    <TooltipPlus
+    <Tooltip
      popupContent={
        (isCopied
          ? t(`${prefixEmbedded}.copied`)
@@ -81,15 +78,15 @@ export const CopyFeedbackNew = ({ content, className }: Pick<Props, 'className'
        className={`w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg ${
          className ?? ''
        }`}
-        onMouseLeave={onMouseLeave}
      >
        <div
          onClick={onClickCopy}
+          onMouseLeave={onMouseLeave}
          className={`w-full h-full ${copyStyle.copyIcon} ${
            isCopied ? copyStyle.copied : ''
          }`}
        ></div>
      </div>
-    </TooltipPlus>
+    </Tooltip>
  )
 }
--- a/web/app/components/base/copy-icon/index.tsx
+++ b/web/app/components/base/copy-icon/index.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { debounce } from 'lodash-es'
 import copy from 'copy-to-clipboard'
-import TooltipPlus from '../tooltip-plus'
+import Tooltip from '../tooltip'
 import {
  Clipboard,
  ClipboardCheck,
@@ -29,7 +29,7 @@ export const CopyIcon = ({ content }: Props) => {
  }, 100)

  return (
-    <TooltipPlus
+    <Tooltip
      popupContent={
        (isCopied
          ? t(`${prefixEmbedded}.copied`)
@@ -46,7 +46,7 @@ export const CopyIcon = ({ content }: Props) => {
          )
        }
      </div>
-    </TooltipPlus>
+    </Tooltip>
  )
 }

--- a/web/app/components/base/features/feature-panel/suggested-questions-after-answer/index.tsx
+++ b/web/app/components/base/features/feature-panel/suggested-questions-after-answer/index.tsx
@@ -2,11 +2,8 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  RiQuestionLine,
-} from '@remixicon/react'
 import { MessageSmileSquare } from '@/app/components/base/icons/src/vender/solid/communication'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'

 const SuggestedQuestionsAfterAnswer: FC = () => {
  const { t } = useTranslation()
@@ -18,9 +15,7 @@ const SuggestedQuestionsAfterAnswer: FC = () => {
      </div>
      <div className='shrink-0 mr-2 flex items-center whitespace-nowrap text-sm text-gray-800 font-semibold'>
        <div className='mr-2'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}</div>
-        <TooltipPlus popupContent={t('appDebug.feature.suggestedQuestionsAfterAnswer.description')}>
-          <RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
-        </TooltipPlus>
+        <Tooltip popupContent={t('appDebug.feature.suggestedQuestionsAfterAnswer.description')}/>
      </div>
      <div className='grow'></div>
      <div className='text-xs text-gray-500'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.resDes')}</div>
--- a/web/app/components/base/features/feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/feature-panel/text-to-speech/param-config-content.tsx
@@ -2,9 +2,6 @@
 import useSWR from 'swr'
 import produce from 'immer'
 import React, { Fragment } from 'react'
-import {
-  RiQuestionLine,
-} from '@remixicon/react'
 import { usePathname } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { Listbox, Transition } from '@headlessui/react'
@@ -74,13 +71,16 @@ const VoiceParamConfig = ({
            <div className='mb-2 flex items-center  space-x-1'>
              <div
                className='leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.voice.voiceSettings.language')}</div>
-              <Tooltip htmlContent={<div className='w-[180px]'>
-                {t('appDebug.voice.voiceSettings.resolutionTooltip').split('\n').map(item => (
-                  <div key={item}>{item}</div>
-                ))}
-              </div>} selector='config-resolution-tooltip'>
-                <RiQuestionLine className='w-[14px] h-[14px] text-gray-400'/>
-              </Tooltip>
+              <Tooltip
+                popupContent={
+                  <div className='w-[180px]'>
+                    {t('appDebug.voice.voiceSettings.resolutionTooltip').split('\n').map(item => (
+                      <div key={item}>{item}
+                      </div>
+                    ))}
+                  </div>
+                }
+              />
            </div>
            <Listbox
              value={languageItem}
--- a/web/app/components/base/image-uploader/image-list.tsx
+++ b/web/app/components/base/image-uploader/image-list.tsx
@@ -8,7 +8,7 @@ import {
 import cn from '@/utils/classnames'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import type { ImageFile } from '@/types/app'
 import { TransferMethod } from '@/types/app'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
@@ -87,11 +87,11 @@ const ImageList: FC<ImageListProps> = ({
                <RiLoader2Line className="animate-spin w-5 h-5 text-white" />
              )}
              {item.progress === -1 && (
-                <TooltipPlus
+                <Tooltip
                  popupContent={t('common.imageUploader.pasteImageLinkInvalid')}
                >
                  <AlertTriangle className="w-4 h-4 text-[#DC6803]" />
-                </TooltipPlus>
+                </Tooltip>
              )}
            </div>
          )}
--- a/web/app/components/base/param-item/index.tsx
+++ b/web/app/components/base/param-item/index.tsx
@@ -1,10 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import {
-  RiQuestionLine,
-} from '@remixicon/react'
-
-import Tooltip from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import Slider from '@/app/components/base/slider'
 import Switch from '@/app/components/base/switch'

@@ -40,9 +36,9 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
          )}
          <span className="mx-1 text-gray-900 text-[13px] leading-[18px] font-medium">{name}</span>
          {!noTooltip && (
-            <Tooltip popupContent={<div className="w-[200px]">{tip}</div>}>
-              <RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
-            </Tooltip>
+            <Tooltip
+              popupContent={<div className="w-[200px]">{tip}</div>}
+            />
          )}

        </div>
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
@@ -25,7 +25,7 @@ import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'

 type WorkflowVariableBlockComponentProps = {
  nodeKey: string
@@ -113,9 +113,9 @@ const WorkflowVariableBlockComponent = ({

  if (!node && !isEnv && !isChatVar) {
    return (
-      <TooltipPlus popupContent={t('workflow.errorMsg.invalidVariable')}>
+      <Tooltip popupContent={t('workflow.errorMsg.invalidVariable')}>
        {Item}
-      </TooltipPlus>
+      </Tooltip>
    )
  }

--- a/web/app/components/base/qrcode/index.tsx
+++ b/web/app/components/base/qrcode/index.tsx
@@ -2,8 +2,8 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import QRCode from 'qrcode.react'
-import Tooltip from '../tooltip'
 import QrcodeStyle from './style.module.css'
+import Tooltip from '@/app/components/base/tooltip'

 type Props = {
  content: string
@@ -51,8 +51,7 @@ const ShareQRCode = ({ content, selectorId, className }: Props) => {

  return (
    <Tooltip
-      selector={`common-qrcode-show-${selectorId}`}
-      content={t(`${prefixEmbedded}`) || ''}
+      popupContent={t(`${prefixEmbedded}`) || ''}
    >
      <div
        className={`w-8 h-8 cursor-pointer rounded-lg ${className ?? ''}`}
--- a/web/app/components/base/tooltip-plus/index.tsx
+++ b/web/app/components/base/tooltip-plus/index.tsx
@@ -1,109 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useEffect, useRef, useState } from 'react'
-import { useBoolean } from 'ahooks'
-import type { OffsetOptions, Placement } from '@floating-ui/react'
-import cn from '@/utils/classnames'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-export type TooltipProps = {
-  position?: Placement
-  triggerMethod?: 'hover' | 'click'
-  disabled?: boolean
-  popupContent: React.ReactNode
-  children: React.ReactNode
-  hideArrow?: boolean
-  popupClassName?: string
-  offset?: OffsetOptions
-  asChild?: boolean
-}
-
-const arrow = (
-  <svg className="absolute text-white h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255"><polygon className="fill-current" points="0,0 127.5,127.5 255,0"></polygon></svg>
-)
-
-const Tooltip: FC<TooltipProps> = ({
-  position = 'top',
-  triggerMethod = 'hover',
-  disabled = false,
-  popupContent,
-  children,
-  hideArrow,
-  popupClassName,
-  offset,
-  asChild,
-}) => {
-  const [open, setOpen] = useState(false)
-  const [isHoverPopup, {
-    setTrue: setHoverPopup,
-    setFalse: setNotHoverPopup,
-  }] = useBoolean(false)
-
-  const isHoverPopupRef = useRef(isHoverPopup)
-  useEffect(() => {
-    isHoverPopupRef.current = isHoverPopup
-  }, [isHoverPopup])
-
-  const [isHoverTrigger, {
-    setTrue: setHoverTrigger,
-    setFalse: setNotHoverTrigger,
-  }] = useBoolean(false)
-
-  const isHoverTriggerRef = useRef(isHoverTrigger)
-  useEffect(() => {
-    isHoverTriggerRef.current = isHoverTrigger
-  }, [isHoverTrigger])
-
-  const handleLeave = (isTrigger: boolean) => {
-    if (isTrigger)
-      setNotHoverTrigger()
-
-    else
-      setNotHoverPopup()
-
-    // give time to move to the popup
-    setTimeout(() => {
-      if (!isHoverPopupRef.current && !isHoverTriggerRef.current)
-        setOpen(false)
-    }, 500)
-  }
-
-  return (
-    <PortalToFollowElem
-      open={disabled ? false : open}
-      onOpenChange={setOpen}
-      placement={position}
-      offset={offset ?? 10}
-    >
-      <PortalToFollowElemTrigger
-        onClick={() => triggerMethod === 'click' && setOpen(v => !v)}
-        onMouseEnter={() => {
-          if (triggerMethod === 'hover') {
-            setHoverTrigger()
-            setOpen(true)
-          }
-        }}
-        onMouseLeave={() => triggerMethod === 'hover' && handleLeave(true)}
-        asChild={asChild}
-      >
-        {children}
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent
-        className="z-[9999]"
-      >
-        <div
-          className={cn(
-            'relative px-3 py-2 text-xs font-normal text-gray-700 bg-white rounded-md shadow-lg',
-            popupClassName,
-          )}
-          onMouseEnter={() => triggerMethod === 'hover' && setHoverPopup()}
-          onMouseLeave={() => triggerMethod === 'hover' && handleLeave(false)}
-        >
-          {popupContent}
-          {!hideArrow && arrow}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
-  )
-}
-
-export default React.memo(Tooltip)
--- a/web/app/components/base/tooltip/index.tsx
+++ b/web/app/components/base/tooltip/index.tsx
@@ -1,52 +1,112 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
-import { Tooltip as ReactTooltip } from 'react-tooltip' // fixed version to 5.8.3 https://github.com/ReactTooltip/react-tooltip/issues/972
-import classNames from '@/utils/classnames'
-import 'react-tooltip/dist/react-tooltip.css'
-
-type TooltipProps = {
-  selector: string
-  content?: string
+import React, { useEffect, useRef, useState } from 'react'
+import { useBoolean } from 'ahooks'
+import type { OffsetOptions, Placement } from '@floating-ui/react'
+import { RiQuestionLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+export type TooltipProps = {
+  position?: Placement
+  triggerMethod?: 'hover' | 'click'
+  triggerClassName?: string
  disabled?: boolean
-  htmlContent?: React.ReactNode
-  className?: string // This should use !impornant to override the default styles eg: '!bg-white'
-  position?: 'top' | 'right' | 'bottom' | 'left'
-  clickable?: boolean
-  children: React.ReactNode
-  noArrow?: boolean
+  popupContent?: React.ReactNode
+  children?: React.ReactNode
+  popupClassName?: string
+  offset?: OffsetOptions
+  needsDelay?: boolean
+  asChild?: boolean
 }

 const Tooltip: FC<TooltipProps> = ({
-  selector,
-  content,
-  disabled,
  position = 'top',
+  triggerMethod = 'hover',
+  triggerClassName,
+  disabled = false,
+  popupContent,
  children,
-  htmlContent,
-  className,
-  clickable,
-  noArrow,
+  popupClassName,
+  offset,
+  asChild = true,
+  needsDelay = false,
 }) => {
+  const [open, setOpen] = useState(false)
+  const [isHoverPopup, {
+    setTrue: setHoverPopup,
+    setFalse: setNotHoverPopup,
+  }] = useBoolean(false)
+
+  const isHoverPopupRef = useRef(isHoverPopup)
+  useEffect(() => {
+    isHoverPopupRef.current = isHoverPopup
+  }, [isHoverPopup])
+
+  const [isHoverTrigger, {
+    setTrue: setHoverTrigger,
+    setFalse: setNotHoverTrigger,
+  }] = useBoolean(false)
+
+  const isHoverTriggerRef = useRef(isHoverTrigger)
+  useEffect(() => {
+    isHoverTriggerRef.current = isHoverTrigger
+  }, [isHoverTrigger])
+
+  const handleLeave = (isTrigger: boolean) => {
+    if (isTrigger)
+      setNotHoverTrigger()
+
+    else
+      setNotHoverPopup()
+
+    // give time to move to the popup
+    if (needsDelay) {
+      setTimeout(() => {
+        if (!isHoverPopupRef.current && !isHoverTriggerRef.current)
+          setOpen(false)
+      }, 500)
+    }
+    else {
+      setOpen(false)
+    }
+  }
+
  return (
-    <div className='tooltip-container'>
-      {React.cloneElement(children as React.ReactElement, {
-        'data-tooltip-id': selector,
-      })
-      }
-      <ReactTooltip
-        id={selector}
-        content={content}
-        className={classNames('!z-[999] !bg-white !text-xs !font-normal !text-gray-700 !shadow-lg !opacity-100', className)}
-        place={position}
-        clickable={clickable}
-        isOpen={disabled ? false : undefined}
-        noArrow={noArrow}
+    <PortalToFollowElem
+      open={disabled ? false : open}
+      onOpenChange={setOpen}
+      placement={position}
+      offset={offset ?? 8}
+    >
+      <PortalToFollowElemTrigger
+        onClick={() => triggerMethod === 'click' && setOpen(v => !v)}
+        onMouseEnter={() => {
+          if (triggerMethod === 'hover') {
+            setHoverTrigger()
+            setOpen(true)
+          }
+        }}
+        onMouseLeave={() => triggerMethod === 'hover' && handleLeave(true)}
+        asChild={asChild}
      >
-        {htmlContent && htmlContent}
-      </ReactTooltip>
-    </div>
+        {children || <div className={triggerClassName || 'p-[1px] w-3.5 h-3.5 shrink-0'}><RiQuestionLine className='text-text-quaternary hover:text-text-tertiary w-full h-full' /></div>}
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent
+        className="z-[9999]"
+      >
+        {popupContent && (<div
+          className={cn(
+            'relative px-3 py-2 text-xs font-normal text-gray-700 bg-white rounded-md shadow-lg break-words',
+            popupClassName,
+          )}
+          onMouseEnter={() => triggerMethod === 'hover' && setHoverPopup()}
+          onMouseLeave={() => triggerMethod === 'hover' && handleLeave(false)}
+        >
+          {popupContent}
+        </div>)}
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
  )
 }

-export default Tooltip
+export default React.memo(Tooltip)