57 lines
1.5 KiB
React
57 lines
1.5 KiB
React
|
import React, { forwardRef, useRef } from "react";
|
||
|
|
import { useTooltipTriggerState } from "@react-stately/tooltip";
|
||
|
|
import { useTooltipTrigger, useTooltip } from "@react-aria/tooltip";
|
||
|
|
import { mergeProps } from "@react-aria/utils";
|
||
|
|
import styles from "./Tooltip.module.css";
|
||
|
|
import classNames from "classnames";
|
||
|
|
|
||
|
|
export function Tooltip({ position, state, ...props }) {
|
||
|
|
let { tooltipProps } = useTooltip(props, state);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={classNames(styles.tooltip, styles[position || "bottom"])}
|
||
|
|
{...mergeProps(props, tooltipProps)}
|
||
|
|
>
|
||
|
|
{props.children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export const TooltipTrigger = forwardRef(({ children, ...rest }, ref) => {
|
||
|
|
const tooltipState = useTooltipTriggerState(rest);
|
||
|
|
const fallbackRef = useRef();
|
||
|
|
const triggerRef = ref || fallbackRef;
|
||
|
|
const { triggerProps, tooltipProps } = useTooltipTrigger(
|
||
|
|
rest,
|
||
|
|
tooltipState,
|
||
|
|
triggerRef
|
||
|
|
);
|
||
|
|
|
||
|
|
if (
|
||
|
|
!Array.isArray(children) ||
|
||
|
|
children.length > 2 ||
|
||
|
|
typeof children[1] !== "function"
|
||
|
|
) {
|
||
|
|
throw new Error(
|
||
|
|
"TooltipTrigger must have two props. The first being a button and the second being a render prop."
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const [tooltipTrigger, tooltip] = children;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={styles.tooltipContainer}>
|
||
|
|
<tooltipTrigger.type
|
||
|
|
{...mergeProps(triggerProps, tooltipTrigger.props, rest)}
|
||
|
|
ref={triggerRef}
|
||
|
|
/>
|
||
|
|
{tooltipState.isOpen && tooltip({ state: tooltipState, ...tooltipProps })}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
TooltipTrigger.defaultProps = {
|
||
|
|
delay: 250,
|
||
|
|
};
|