stream-chat-react/dist/components/Tooltip/Tooltip.js

React components to create chat conversations or livestream style chat

import React, { useEffect, useState } from 'react';
import { usePopoverPosition } from '../Dialog/hooks/usePopoverPosition';
export const Tooltip = ({ children, ...rest }) => (React.createElement("div", { className: 'str-chat__tooltip', ...rest }, children));
export const PopperTooltip = ({ children, offset = [0, 10], placement = 'top', referenceElement, visible = false, }) => {
    const [popperElement, setPopperElement] = useState(null);
    const { placement: resolvedPlacement, refs, strategy, x, y, } = usePopoverPosition({
        offset,
        placement,
    });
    useEffect(() => {
        refs.setReference(referenceElement);
    }, [referenceElement, refs]);
    useEffect(() => {
        refs.setFloating(popperElement);
    }, [popperElement, refs]);
    if (!visible)
        return null;
    return (React.createElement("div", { className: 'str-chat__tooltip', "data-placement": resolvedPlacement, ref: setPopperElement, style: { left: x ?? 0, position: strategy, top: y ?? 0 } }, children));
};