@ducor/react/dist/components/tooltip.js

admin template ui interface

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { twMerge } from "tailwind-merge";
import { useHover, usePlacement } from "@ducor/hooks";
import Button from "./button";
const Tooltip = ({ children, label, position = "left", className, }) => {
    // Use hover hook
    const { hovered, ref } = useHover({});
    const { refs, styles } = usePlacement({
        isOpen: hovered,
        defaultAlignment: "center",
        defaultPlacement: position,
    });
    return (_jsxs("div", { ref: ref, className: 'relative inline-block', children: [_jsx("div", { ref: refs.content, children: children }), hovered && (_jsx(Button, { as: 'span', color: 'default', variant: 'solid', ref: refs.reference, role: 'tooltip', className: twMerge(`absolute z-50 min-w-max px-3 py-2 text-sm font-medium rounded-md shadow-sm`, className), style: styles, children: label }))] }));
};
export default Tooltip;