@sitecore/sc-contenthub-blok/esm/Components/BlokTooltip/BlokTooltip.js

A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).

import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import { Children, cloneElement, isValidElement, useMemo, useState, } from "react";
import { isFunction } from "../../Foundations/utils";
export const BlokTooltip = ({ placement = "top", title, children, tooltipId = "ch-tooltip", }) => {
    const [titleOnElement, setTitleOnElement] = useState(title);
    const withTooltip = useMemo(() => Children.map(children, (child) => {
        if (isValidElement(child)) {
            return cloneElement(child, {
                title: titleOnElement,
                "data-tooltip-html": title,
                "data-place": placement,
                "data-tooltip-id": tooltipId,
                onMouseEnter: () => {
                    if (isFunction(child.props.onMouseEnter)) {
                        child.props.onMouseEnter();
                    }
                    setTitleOnElement("");
                },
                onMouseLeave: () => {
                    if (isFunction(child.props.onMouseLeave)) {
                        child.props.onMouseLeave();
                    }
                    setTitleOnElement(title);
                },
            });
        }
        return child;
    }), [children, placement, title, titleOnElement, tooltipId]);
    return _jsx(_Fragment, { children: withTooltip });
};
//# sourceMappingURL=BlokTooltip.js.map