@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
46 lines (45 loc) • 1.53 kB
JavaScript
import { getElementById } from "../utils/document.js";
import { useClasses } from "./Tooltip.styles.js";
import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useEffect, useState } from "react";
import { jsx } from "react/jsx-runtime";
import Fade from "@mui/material/Fade";
import Tooltip from "@mui/material/Tooltip";
//#region src/Tooltip/Tooltip.tsx
/**
* Tooltips display informative text on hover, focus, or tap, and automatically label the target element for accessibility.
*
* For icon-only buttons, consider using `HvIconButton`, which includes built-in tooltip behavior.
*
*/
var HvTooltip = forwardRef(function HvTooltip(props, ref) {
const { className, classes: classesProp, open, enterDelay = 300, placement = "top", 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: classes.tooltip,
popper: classes.popper
},
title,
PopperProps: { container },
...others,
children
});
});
//#endregion
export { HvTooltip };