Add DimensionInfoPopover component (#19281)

* Add DimensionInfoPopover component

* convert DimensionInfoPopover into ts

frontend/src/metabase/components/MetadataInfo/DimensionInfoPopover/DimensionInfoPopover.tsx

+import React from "react";
+import PropTypes from "prop-types";
+
+import Dimension from "metabase-lib/lib/Dimension";
+import TippyPopver, {
+  ITippyPopoverProps,
+} from "metabase/components/Popover/TippyPopover";
+import DimensionInfo from "metabase/components/MetadataInfo/DimensionInfo";
+
+export const POPOVER_DELAY: [number, number] = [1000, 300];
+
+const propTypes = {
+  dimension: PropTypes.instanceOf(Dimension),
+  children: PropTypes.node,
+  placement: PropTypes.string,
+};
+
+type Props = { dimension: Dimension } & Pick<
+  ITippyPopoverProps,
+  "children" | "placement"
+>;
+
+function DimensionInfoPopover({ dimension, children, placement }: Props) {
+  return dimension ? (
+    <TippyPopver
+      delay={POPOVER_DELAY}
+      interactive
+      placement={placement || "left-start"}
+      content={<DimensionInfo dimension={dimension} />}
+    >
+      {children}
+    </TippyPopver>
+  ) : (
+    children
+  );
+}
+
+DimensionInfoPopover.propTypes = propTypes;
+
+export default DimensionInfoPopover;

frontend/src/metabase/components/MetadataInfo/DimensionInfoPopover/index.js

+export { default } from "./DimensionInfoPopover";

frontend/src/metabase/components/Popover/TippyPopover.tsx

 import React, { useState, useMemo } from "react";
+import PropTypes from "prop-types";
 import * as Tippy from "@tippyjs/react";
 
 import { isReducedMotionPreferred } from "metabase/lib/dom";
@@ -7,19 +8,25 @@ import EventSandbox from "metabase/components/EventSandbox";
 const TippyComponent = Tippy.default;
 type TippyProps = Tippy.TippyProps;
 
-interface TippyPopoverProps extends TippyProps {
+export interface ITippyPopoverProps extends TippyProps {
   disableContentSandbox?: boolean;
   lazy?: boolean;
 }
 
 const OFFSET: [number, number] = [0, 5];
 
+const propTypes = {
+  disablContentSandbox: PropTypes.bool,
+  lazy: PropTypes.bool,
+  ...TippyComponent.propTypes,
+};
+
 function TippyPopover({
   disableContentSandbox,
   lazy = true,
   content,
   ...props
-}: TippyPopoverProps) {
+}: ITippyPopoverProps) {
   const animationDuration = isReducedMotionPreferred() ? 0 : undefined;
   const [mounted, setMounted] = useState(!lazy);
   const plugins = useMemo(
@@ -61,4 +68,6 @@ function TippyPopover({
   );
 }
 
+TippyPopover.propTypes = propTypes;
+
 export default TippyPopover;