@vectara/vectara-ui/lib/components/tooltip/Tooltip.js

Vectara's design system, codified as a React and Sass component library

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, cloneElement } from "react";
import { Tooltip } from "react-tooltip";
const generateTooltipId = () => {
    return `tooltip-${Math.random().toString(36).slice(2, 9)}`;
};
export const VuiTooltip = ({ children, tip }) => {
    const [id] = useState(generateTooltipId());
    const target = cloneElement(children, {
        "data-tooltip-id": id
    });
    return (_jsxs(_Fragment, { children: [target, _jsx(Tooltip, Object.assign({ id: id, offset: 10, className: "vuiTooltip", opacity: 1 }, { children: tip }))] }));
};
// This is a workaround for the issue with ResizeObserver in ReactTooltip.
// Without this, uncaught runtime errors are thrown: "ResizeObserver loop
// completed with undelivered notifications."
// See https://github.com/ReactTooltip/react-tooltip/issues/1104
const debounce = (callback, delay) => {
    let tid;
    return function (...args) {
        // eslint-disable-next-line no-restricted-globals
        const ctx = self;
        tid && clearTimeout(tid);
        tid = setTimeout(() => {
            callback.apply(ctx, args);
        }, delay);
    };
};
const _ = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ {
    constructor(callback) {
        callback = debounce(callback, 20);
        super(callback);
    }
};