@hitachivantara/uikit-react-core/dist/esm/Tooltip/Tooltip.js

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { forwardRef, useState, useEffect } from "react";
import Fade from "@mui/material/Fade";
import Tooltip from "@mui/material/Tooltip";
import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
import { getElementById } from "../utils/document.js";
import { useClasses } from "./Tooltip.styles.js";
import { staticClasses } from "./Tooltip.styles.js";
const HvTooltip = forwardRef(function HvTooltip2(props, ref) {
  const {
    className,
    classes: classesProp,
    open,
    enterDelay = 300,
    placement = "top",
    useSingle = true,
    children,
    title,
    TransitionComponent = Fade,
    TransitionProps = { timeout: 400, placement: "top" },
    containerId,
    ...others
  } = useDefaultProps("HvTooltip", props);
  const { rootId } = useTheme();
  const { classes } = useClasses(classesProp);
  const [container, setContainer] = useState(
    () => getElementById(containerId ?? rootId)
  );
  useEffect(() => {
    setContainer(getElementById(containerId ?? rootId));
  }, [containerId, rootId]);
  return /* @__PURE__ */ jsx(
    Tooltip,
    {
      ref,
      open,
      enterDelay,
      placement,
      TransitionComponent,
      TransitionProps,
      className,
      classes: {
        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,
        popper: classes.popper
      },
      title,
      PopperProps: { container },
      ...others,
      children
    }
  );
});
export {
  HvTooltip,
  staticClasses as tooltipClasses
};