chore(ui) : Remove react-tippy dependency and use antd component (#9606)

* chore(ui) : Remove react-tippy dependency and use antd component * remove : react-tippy package * chore : replace popover with tooltip where required * fix : unit test
2025-09-25 17:04:54 +00:00 · 2023-01-04 20:51:46 +05:30 · 2023-01-04 20:51:46 +05:30 · a93909e7c8
commit a93909e7c8
parent daa5cc3caf
21 changed files with 83 additions and 354 deletions
--- a/openmetadata-ui/src/main/resources/ui/package.json
+++ b/openmetadata-ui/src/main/resources/ui/package.json
@ -82,7 +82,6 @@
    "react-oidc": "^1.0.3",
    "react-quill": "^2.0.0",
    "react-router-dom": "^5.2.0",
-    "react-tippy": "^1.4.0",
    "react-toastify": "^8.2.0",
    "reactflow": "^11.1.1",
    "reactjs-localstorage": "^1.0.1",
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/SendButton.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/SendButton.tsx
@ -11,11 +11,11 @@
 *  limitations under the License.
 */

+import { Popover } from 'antd';
 import classNames from 'classnames';
 import React, { FC, Fragment } from 'react';
 import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import { Button } from '../../buttons/Button/Button';
-import PopOver from '../../common/popover/PopOver';

 interface SendButtonProp {
  editorValue: string;
@ -36,8 +36,8 @@ export const SendButton: FC<SendButtonProp> = ({
    <div
      className="tw-absolute tw-right-2 tw-bottom-2 tw-flex tw-flex-row tw-items-center tw-justify-end"
      onClick={(e) => e.stopPropagation()}>
-      <PopOver
-        html={
+      <Popover
+        content={
          <Fragment>
            <strong>Send now</strong>
            <p>
@ -48,9 +48,8 @@ export const SendButton: FC<SendButtonProp> = ({
            </p>
          </Fragment>
        }
-        position="top"
-        size="small"
-        trigger="mouseenter">
+        placement="top"
+        trigger="hover">
        <Button
          className={classNames(
            'tw-py-0.5 tw-px-1 tw-rounded tw-bg-none',
@ -67,7 +66,7 @@ export const SendButton: FC<SendButtonProp> = ({
            width="18px"
          />
        </Button>
-      </PopOver>
+      </Popover>
    </div>
  );
 };
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelHeader.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelHeader.tsx
@ -12,6 +12,7 @@
 */

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from 'antd';
 import classNames from 'classnames';
 import React, { FC } from 'react';
 import {
@ -19,7 +20,6 @@ import {
  getFeedPanelHeaderText,
 } from '../../../utils/FeedUtils';
 import { Button } from '../../buttons/Button/Button';
-import PopOver from '../../common/popover/PopOver';
 import { FeedPanelHeaderProp } from './ActivityFeedPanel.interface';
 const FeedPanelHeader: FC<FeedPanelHeaderProp> = ({
  onCancel,
@ -43,10 +43,10 @@ const FeedPanelHeader: FC<FeedPanelHeaderProp> = ({
        </p>
        <div className="tw-flex">
          {onShowNewConversation ? (
-            <PopOver
-              position="bottom"
+            <Tooltip
+              placement="bottom"
              title="Start conversation"
-              trigger="mouseenter">
+              trigger="hover">
              <Button
                className={classNames('tw-h-7 tw-px-2')}
                data-testid="add-new-conversation"
@ -58,7 +58,7 @@ const FeedPanelHeader: FC<FeedPanelHeaderProp> = ({
                }}>
                <FontAwesomeIcon icon="plus" />
              </Button>
-            </PopOver>
+            </Tooltip>
          ) : null}
          <svg
            className="tw-w-5 tw-h-5 tw-ml-2 tw-cursor-pointer tw-self-center"
--- a/openmetadata-ui/src/main/resources/ui/src/components/FrequentlyJoinedTables/FrequentlyJoinedTables.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/FrequentlyJoinedTables/FrequentlyJoinedTables.component.tsx
@ -11,12 +11,12 @@
 *  limitations under the License.
 */

+import { Popover } from 'antd';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { getTableDetailsPath } from '../../constants/constants';
 import { JoinedWith } from '../../generated/entity/data/table';
 import { getCountBadge } from '../../utils/CommonUtils';
-import PopOver from '../common/popover/PopOver';

 type Props = {
  header: string;
@ -118,15 +118,14 @@ const FrequentlyJoinedTables: FunctionComponent<Props> = ({

        {joinedTables.length > viewCap && (
          <div data-testid="related-tables-data">
-            <PopOver
-              html={additionalOptions()}
-              position="bottom"
-              theme="light"
+            <Popover
+              content={additionalOptions()}
+              placement="bottom"
              trigger="click">
              <span className="show-more">
                {`+ ${joinedTables.length - viewCap} more`}
              </span>
-            </PopOver>
+            </Popover>
          </div>
        )}

--- a/openmetadata-ui/src/main/resources/ui/src/components/GithubStarButton/GithubStarButton.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GithubStarButton/GithubStarButton.tsx
@ -11,10 +11,10 @@
 *  limitations under the License.
 */

+import { Popover } from 'antd';
 import { isNil } from 'lodash';
-import React, { CSSProperties, FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
-import PopOver from '../common/popover/PopOver';

 const GithubStarButton: FunctionComponent = () => {
  const [open, setOpen] = useState<boolean>(true);
@ -25,9 +25,8 @@ const GithubStarButton: FunctionComponent = () => {

  return (
    <div className="tw-fixed tw-bottom-8 tw-right-8">
-      <PopOver
-        delay={100}
-        html={
+      <Popover
+        content={
          <>
            <a
              className="link-text-grey tw-text-sm tw-font-medium"
@ -44,25 +43,9 @@ const GithubStarButton: FunctionComponent = () => {
            </a>
          </>
        }
+        mouseEnterDelay={100}
        open={open}
-        popperOptions={{
-          modifiers: {
-            addZIndex: {
-              enabled: true,
-              order: 810,
-              // react-tippy has this dataObject that can be of any type
-              fn: (data: { styles: CSSProperties }) => ({
-                ...data,
-                styles: {
-                  ...data.styles,
-                  zIndex: 9990,
-                },
-              }),
-            },
-          },
-        }}
-        position="left"
-        theme="light"
+        placement="left"
        trigger="click">
        <button
          className="tw-h-12 tw-w-12 tw-rounded-full tw-shadow-lg tw-cursor-pointer tw-bg-white"
@ -74,7 +57,7 @@ const GithubStarButton: FunctionComponent = () => {
            width="30"
          />
        </button>
-      </PopOver>
+      </Popover>
    </div>
  );
 };
--- a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
@ -13,7 +13,7 @@

 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Table, Tooltip, Typography } from 'antd';
+import { Button, Popover, Table, Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
@ -43,7 +43,6 @@ import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
 import NextPrevious from '../common/next-previous/NextPrevious';
-import PopOver from '../common/popover/PopOver';
 import Searchbar from '../common/searchbar/Searchbar';
 import DropDownList from '../dropdown/DropDownList';
 import Loader from '../Loader/Loader';
@ -488,8 +487,8 @@ const Ingestion: React.FC<IngestionProps> = ({
        key: 'schedule',
        render: (_, record) =>
          record.airflowConfig?.scheduleInterval ? (
-            <PopOver
-              html={
+            <Popover
+              content={
                <div>
                  {cronstrue.toString(
                    record.airflowConfig.scheduleInterval || '',
@ -500,11 +499,10 @@ const Ingestion: React.FC<IngestionProps> = ({
                  )}
                </div>
              }
-              position="bottom"
-              theme="light"
-              trigger="mouseenter">
+              placement="bottom"
+              trigger="hover">
              <span>{record.airflowConfig.scheduleInterval ?? '--'}</span>
-            </PopOver>
+            </Popover>
          ) : (
            <span>--</span>
          ),
--- a/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTermsAntd.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTermsAntd.tsx
@ -11,7 +11,7 @@
 *  limitations under the License.
 */

-import { Button, Card } from 'antd';
+import { Button, Card, Popover } from 'antd';
 import { RecentlySearchedData } from 'Models';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@ -21,7 +21,7 @@ import {
  removeRecentSearchTerm,
 } from '../../utils/CommonUtils';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
-import PopOver from '../common/popover/PopOver';
+
 import { leftPanelAntCardStyle } from '../containers/PageLayout';

 const RecentSearchedTermsAntd: FunctionComponent = () => {
@ -63,17 +63,16 @@ const RecentSearchedTermsAntd: FunctionComponent = () => {
                        data-testid={`search-term-${item.term}`}
                        type="text">
                        {item.term.length > 20 ? (
-                          <PopOver
-                            html={
+                          <Popover
+                            content={
                              <div className="tw-flex tw-flex-nowrap">
                                {item.term}
                              </div>
                            }
-                            position="top"
-                            size="regular"
-                            trigger="mouseenter">
+                            placement="top"
+                            trigger="hover">
                            <span>{item.term.slice(0, 20)}...</span>
-                          </PopOver>
+                          </Popover>
                        ) : (
                          item.term
                        )}
--- a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConnectionDetails/ServiceConnectionDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceConnectionDetails/ServiceConnectionDetails.component.tsx
@ -17,6 +17,7 @@

 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from 'antd';
 import { isEmpty, isNull, isObject } from 'lodash';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { DEF_UI_SCHEMA, JWT_CONFIG } from '../../constants/Services.constant';
@ -34,7 +35,6 @@ import { getMessagingConfig } from '../../utils/MessagingServiceUtils';
 import { getMetadataConfig } from '../../utils/MetadataServiceUtils';
 import { getMlmodelConfig } from '../../utils/MlmodelServiceUtils';
 import { getPipelineConfig } from '../../utils/PipelineServiceUtils';
-import PopOver from '../common/popover/PopOver';

 type ServiceConnectionDetailsProps = {
  connectionDetails: ConfigData;
@ -166,17 +166,13 @@ const ServiceConnectionDetails = ({
          <div className="tw-w-1/2 tw-flex tw-nowrap tw-mb-3" key={key}>
            <div className="tw-flex">
              <p className="tw-text-gray-500 tw-m-0">{title || key}:</p>
-              <PopOver
-                delay={0}
-                position="bottom"
-                title={description}
-                trigger="mouseenter">
+              <Tooltip position="bottom" title={description} trigger="hover">
                <FontAwesomeIcon
                  className="tw-mx-1"
                  color="#C4C4C4"
                  icon={{ ...faInfoCircle }}
                />
-              </PopOver>
+              </Tooltip>
            </div>
            <div className="tw-mx-3 tw-flex-1">
              <input
--- a/openmetadata-ui/src/main/resources/ui/src/components/TestSuitePipelineTab/TestSuitePipelineTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TestSuitePipelineTab/TestSuitePipelineTab.component.tsx
@ -12,7 +12,7 @@
 */

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Col, Row, Table, Tooltip } from 'antd';
+import { Button, Col, Popover, Row, Table, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import cronstrue from 'cronstrue';
@ -39,7 +39,6 @@ import {
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ErrorPlaceHolderIngestion from '../common/error-with-placeholder/ErrorPlaceHolderIngestion';
-import PopOver from '../common/popover/PopOver';
 import { IngestionRecentRuns } from '../Ingestion/IngestionRecentRun/IngestionRecentRuns.component';
 import Loader from '../Loader/Loader';
 import EntityDeleteModal from '../Modals/EntityDeleteModal/EntityDeleteModal';
@ -366,8 +365,8 @@ const TestSuitePipelineTab = () => {
          return (
            <>
              {record?.airflowConfig.scheduleInterval ? (
-                <PopOver
-                  html={
+                <Popover
+                  content={
                    <div>
                      {cronstrue.toString(
                        record.airflowConfig.scheduleInterval || '',
@ -378,11 +377,10 @@ const TestSuitePipelineTab = () => {
                      )}
                    </div>
                  }
-                  position="bottom"
-                  theme="light"
-                  trigger="mouseenter">
+                  placement="bottom"
+                  trigger="hover">
                  <span>{record.airflowConfig.scheduleInterval ?? '--'}</span>
-                </PopOver>
+                </Popover>
              ) : (
                <span>--</span>
              )}
--- a/openmetadata-ui/src/main/resources/ui/src/components/buttons/CopyToClipboardButton/CopyToClipboardButton.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/buttons/CopyToClipboardButton/CopyToClipboardButton.test.tsx
@ -20,23 +20,14 @@ const mockProps = {
  copyText: 'mock-copy',
 };

-jest.mock('../../common/popover/PopOver', () => {
-  return jest
-    .fn()
-    .mockImplementation(({ children }: { children: React.ReactNode }) => (
-      <p data-testid="popover">{children}</p>
-    ));
-});
-
 describe('Test CopyToClipboardButton Component', () => {
  it('Should render all child elements', () => {
    const { container } = render(<CopyToClipboardButton {...mockProps} />, {
      wrapper: MemoryRouter,
    });
-    const popover = getByTestId(container, 'popover');
+
    const copyIcon = getByTestId(container, 'copy-icon');

-    expect(popover).toBeInTheDocument();
    expect(copyIcon).toBeInTheDocument();
  });
 });
--- a/openmetadata-ui/src/main/resources/ui/src/components/buttons/CopyToClipboardButton/CopyToClipboardButton.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/buttons/CopyToClipboardButton/CopyToClipboardButton.tsx
@ -11,17 +11,17 @@
 *  limitations under the License.
 */

+import { Popover, PopoverProps } from 'antd';
 import React, { FunctionComponent, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import SVGIcons, { Icons } from '../../../utils/SvgUtils';
-import PopOver from '../../common/popover/PopOver';
-import { Position } from '../../common/popover/PopOverTypes';
+
 import { Button } from '../Button/Button';

 interface Props {
  copyText: string;
  copyTimer?: number;
-  position?: Position;
+  position?: PopoverProps['placement'];
  onCopy?: () => void;
 }

@ -49,9 +49,8 @@ export const CopyToClipboardButton: FunctionComponent<Props> = ({
        size="custom"
        theme="default"
        variant="text">
-        <PopOver
-          delay={0}
-          html={
+        <Popover
+          content={
            <span
              className="tw-text-grey-body tw-text-xs tw-font-medium tw-italic"
              data-testid="copy-success">
@ -59,8 +58,7 @@ export const CopyToClipboardButton: FunctionComponent<Props> = ({
            </span>
          }
          open={copied}
-          position={position}
-          theme="light"
+          placement={position}
          trigger="click">
          <SVGIcons
            alt="Copy"
@ -68,7 +66,7 @@ export const CopyToClipboardButton: FunctionComponent<Props> = ({
            icon={Icons.COPY}
            width="16px"
          />
-        </PopOver>
+        </Popover>
      </Button>
    </CopyToClipboard>
  );
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/description/DescriptionV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/description/DescriptionV1.tsx
@ -23,7 +23,6 @@ import { Table } from '../../../generated/entity/data/table';
 import { getEntityFeedLink } from '../../../utils/EntityUtils';
 import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import { ModalWithMarkdownEditor } from '../../Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
-import PopOver from '../popover/PopOver';
 import RichTextEditorPreviewer from '../rich-text-editor/RichTextEditorPreviewer';
 const { Text } = Typography;

@ -129,16 +128,16 @@ const DescriptionV1 = ({
              className="focus:tw-outline-none tw-ml-2 tw--mt-6"
              data-testid="request-description"
              onClick={() => onEntityFieldSelect?.(EntityField.DESCRIPTION)}>
-              <PopOver
-                position="top"
+              <Tooltip
+                placement="top"
                title="Request description"
-                trigger="mouseenter">
+                trigger="hover">
                <SVGIcons
                  alt="request-description"
                  className="tw-mt-2"
                  icon={Icons.REQUEST}
                />
-              </PopOver>
+              </Tooltip>
            </button>
          ) : null}
          {!isUndefined(descriptionThread) ? (
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx
@ -11,12 +11,12 @@
 *  limitations under the License.
 */

+import { Tooltip } from 'antd';
 import classNames from 'classnames';
 import { isNil } from 'lodash';
 import React, { FunctionComponent } from 'react';
 import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { getCountBadge } from '../../../utils/CommonUtils';
-import PopOver from '../popover/PopOver';
 import { FilterContainerProp } from './facetFilter.interface';

 const FilterContainer: FunctionComponent<FilterContainerProp> = ({
@ -34,9 +34,9 @@ const FilterContainer: FunctionComponent<FilterContainerProp> = ({
      : name;

    return (
-      <PopOver position="top" title={formattedName} trigger="mouseenter">
-        <>{label || formattedName}</>
-      </PopOver>
+      <Tooltip placement="top" title={formattedName} trigger="hover">
+        {label || formattedName}
+      </Tooltip>
    );
  };

--- a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.test.tsx
@ -1,98 +0,0 @@
-/*
- *  Copyright 2022 Collate.
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *  http://www.apache.org/licenses/LICENSE-2.0
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-import {
-  fireEvent,
-  getByText,
-  queryByText,
-  render,
-  screen,
-} from '@testing-library/react';
-import React from 'react';
-import PopOver from './PopOver';
-
-let global;
-
-jest.useRealTimers();
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(global as any).document.createRange = () => ({
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setStart: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setEnd: () => {},
-  commonAncestorContainer: {
-    nodeName: 'BODY',
-    ownerDocument: document,
-  },
-});
-
-describe('Test Popover Component', () => {
-  it('Component should render', () => {
-    const { container } = render(
-      <PopOver
-        arrow
-        className=""
-        delay={500}
-        hideDelay={0}
-        position="bottom"
-        size="regular"
-        sticky={false}
-        theme="dark"
-        trigger="click">
-        <span>Hello World</span>
-      </PopOver>
-    );
-
-    const popover = queryByText(container, /Hello World/i);
-
-    expect(popover).toBeInTheDocument();
-  });
-
-  it('Onclick popover should display title', async () => {
-    const { container } = render(
-      <PopOver position="bottom" title="test popover" trigger="click">
-        <span>Hello World</span>
-      </PopOver>
-    );
-
-    fireEvent(
-      getByText(container, /Hello World/i),
-      new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-      })
-    );
-
-    expect(await screen.findByText(/test popover/i)).toBeInTheDocument();
-  });
-
-  it('Onclick popover should display html', async () => {
-    const html = <span>test popover</span>;
-    const { container } = render(
-      <PopOver html={html} position="bottom" trigger="click">
-        <span>Hello World</span>
-      </PopOver>
-    );
-
-    fireEvent(
-      getByText(container, /Hello World/i),
-      new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-      })
-    );
-
-    expect(await screen.findByText(/test popover/i)).toBeInTheDocument();
-  });
-});
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx
@ -1,80 +0,0 @@
-/*
- *  Copyright 2022 Collate.
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *  http://www.apache.org/licenses/LICENSE-2.0
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Tooltip } from 'react-tippy';
-import 'react-tippy/dist/tippy.css';
-import { PopOverProp, Position, Size, Theme, Trigger } from './PopOverTypes';
-
-const PopOver: React.FC<PopOverProp> = ({
-  arrow = true,
-  children,
-  className = '',
-  delay = 500,
-  hideDelay = 0,
-  html,
-  position,
-  size = 'regular',
-  title,
-  trigger,
-  theme = 'dark',
-  sticky = false,
-  ...props
-}: PopOverProp): JSX.Element => {
-  return (
-    <Tooltip
-      arrow={arrow}
-      className={className}
-      delay={delay}
-      hideDelay={hideDelay}
-      html={html}
-      position={position}
-      size={size}
-      sticky={sticky}
-      theme={theme}
-      title={title || ''}
-      trigger={trigger}
-      {...props}>
-      {children}
-    </Tooltip>
-  );
-};
-
-PopOver.propTypes = {
-  arrow: PropTypes.bool,
-  children: PropTypes.element,
-  className: PropTypes.string,
-  html: PropTypes.element,
-  position: PropTypes.oneOf([
-    'top' as Position,
-    'bottom' as Position,
-    'left' as Position,
-    'right' as Position,
-  ]).isRequired,
-  size: PropTypes.oneOf(['small' as Size, 'regular' as Size, 'big' as Size]),
-  theme: PropTypes.oneOf([
-    'dark' as Theme,
-    'light' as Theme,
-    'transparent' as Theme,
-  ]),
-  title: PropTypes.string,
-  trigger: PropTypes.oneOf([
-    'mouseenter' as Trigger,
-    'focus' as Trigger,
-    'click' as Trigger,
-    'manual' as Trigger,
-  ]).isRequired,
-};
-
-export default PopOver;
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts
@ -1,35 +0,0 @@
-/*
- *  Copyright 2022 Collate.
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *  http://www.apache.org/licenses/LICENSE-2.0
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-import React, { ReactNode } from 'react';
-import { TooltipProps } from 'react-tippy';
-
-export type Position = 'top' | 'left' | 'bottom' | 'right';
-export type Trigger = 'mouseenter' | 'focus' | 'click' | 'manual';
-export type Theme = 'dark' | 'light' | 'transparent';
-export type Size = 'small' | 'regular' | 'big';
-
-export interface PopOverProp extends TooltipProps {
-  html?: React.ReactElement;
-  title?: string;
-  arrow?: boolean;
-  theme?: Theme;
-  size?: Size;
-  position: Position;
-  trigger: Trigger;
-  children: ReactNode;
-  className?: string;
-  delay?: number;
-  hideDelay?: number;
-  sticky?: boolean;
-}
--- a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
@ -11,7 +11,16 @@
 *  limitations under the License.
 */

-import { Badge, Dropdown, Image, Input, Menu, Select, Space } from 'antd';
+import {
+  Badge,
+  Dropdown,
+  Image,
+  Input,
+  Menu,
+  Select,
+  Space,
+  Tooltip,
+} from 'antd';
 import { CookieStorage } from 'cookie-storage';
 import i18next from 'i18next';
 import { debounce, toString } from 'lodash';
@ -50,7 +59,6 @@ import SearchOptions from '../app-bar/SearchOptions';
 import Suggestions from '../app-bar/Suggestions';
 import Avatar from '../common/avatar/Avatar';
 import CmdKIcon from '../common/CmdKIcon/CmdKIcon.component';
-import PopOver from '../common/popover/PopOver';
 import LegacyDropDown from '../dropdown/DropDown';
 import { WhatsNewModal } from '../Modals/WhatsNewModal';
 import NotificationBox from '../NotificationBox/NotificationBox.component';
@ -461,10 +469,7 @@ const NavBar = ({
              <LegacyDropDown
                dropDownList={profileDropdown}
                icon={
-                  <PopOver
-                    position="bottom"
-                    title="Profile"
-                    trigger="mouseenter">
+                  <Tooltip placement="bottom" title="Profile" trigger="hover">
                    {isImgUrlValid ? (
                      <div className="profile-image square tw--mr-2">
                        <Image
@ -480,7 +485,7 @@ const NavBar = ({
                    ) : (
                      <Avatar name={username} width="30" />
                    )}
-                  </PopOver>
+                  </Tooltip>
                }
                isDropDownIconVisible={false}
                type="link"
--- a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.test.tsx
@ -267,14 +267,6 @@ jest.mock('../../utils/TableUtils', () => ({
  getUsagePercentile: jest.fn().mockReturnValue('Medium - 45th pctile'),
 }));

-jest.mock('../../components/common/popover/PopOver', () => {
-  return jest
-    .fn()
-    .mockImplementation(({ children }: { children: React.ReactNode }) => (
-      <div data-testid="popover">{children}</div>
-    ));
-});
-
 jest.mock('../../utils/CommonUtils', () => ({
  getCurrentUserId: jest
    .fn()
--- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
@ -11,12 +11,12 @@
 *  limitations under the License.
 */

+import { Popover } from 'antd';
 import i18next from 'i18next';
 import { isEmpty, isNil, isUndefined, lowerCase, startCase } from 'lodash';
 import { Bucket, LeafNodes, LineagePos } from 'Models';
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
-import PopOver from '../components/common/popover/PopOver';
 import { EntityData } from '../components/common/PopOverCard/EntityPopOverCard';
 import { ResourceEntity } from '../components/PermissionProvider/PermissionProvider.interface';
 import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
@ -542,8 +542,8 @@ export const getFrequentlyJoinedColumns = (
        ))}

        {frequentlyJoinedWithColumns.length > 3 && (
-          <PopOver
-            html={
+          <Popover
+            content={
              <div className="text-left">
                {frequentlyJoinedWithColumns
                  ?.slice(3)
@ -569,11 +569,10 @@ export const getFrequentlyJoinedColumns = (
                  ))}
              </div>
            }
-            position="bottom"
-            theme="light"
+            placement="bottom"
            trigger="click">
            <span className="show-more m-l-xss text-underline">...</span>
-          </PopOver>
+          </Popover>
        )}
      </span>
    </div>
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
@ -12,6 +12,7 @@
 */

 import Icon from '@ant-design/icons/lib/components/Icon';
+import { Tooltip } from 'antd';
 import { ExpandableConfig } from 'antd/lib/table/interface';
 import classNames from 'classnames';
 import { t } from 'i18next';
@ -26,7 +27,6 @@ import { ReactComponent as MlModelIcon } from '../assets/svg/mlmodal.svg';
 import { ReactComponent as PipelineIcon } from '../assets/svg/pipeline-grey.svg';
 import { ReactComponent as TableIcon } from '../assets/svg/table-grey.svg';
 import { ReactComponent as TopicIcon } from '../assets/svg/topic-grey.svg';
-import PopOver from '../components/common/popover/PopOver';
 import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
 import {
  getDashboardDetailsPath,
@ -180,14 +180,13 @@ export const getConstraintIcon = (
  }

  return (
-    <PopOver
+    <Tooltip
      className={classNames(className)}
-      position="bottom"
-      size="small"
+      placement="bottom"
      title={title}
-      trigger="mouseenter">
+      trigger="hover">
      <SVGIcons alt={title} icon={icon} width={width} />
-    </PopOver>
+    </Tooltip>
  );
 };

--- a/openmetadata-ui/src/main/resources/ui/yarn.lock
+++ b/openmetadata-ui/src/main/resources/ui/yarn.lock
@ -11121,11 +11121,6 @@ polished@^3.4.2:
  dependencies:
    "@babel/runtime" "^7.12.5"

-popper.js@^1.11.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 portfinder@^1.0.28:
  version "1.0.32"
  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.32.tgz#2fe1b9e58389712429dc2bea5beb2146146c7f81"
@ -12276,13 +12271,6 @@ react-test-renderer@^16.14.0:
    react-is "^16.8.6"
    scheduler "^0.19.1"

-react-tippy@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/react-tippy/-/react-tippy-1.4.0.tgz#e8a8b4085ec985e5c94fe128918b733b588a1465"
-  integrity sha512-r/hM5XK9Ztr2ZY7IWKuRmISTlUPS/R6ddz6PO2EuxCgW+4JBcGZRPU06XcVPRDCOIiio8ryBQFrXMhFMhsuaHA==
-  dependencies:
-    popper.js "^1.11.1"
-
 react-toastify@^8.2.0:
  version "8.2.0"
  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-8.2.0.tgz#ef7d56bdfdc6272ca6b228368ab564721c3a3244"