Tooltip Component

An information component that pops up when the mouse hovers over an anchor element, or the element receives keyboard focus.

Interface

declare namespace Tooltip {
        interface TriggerProps extends React.HTMLAttributes {
                onMouseEnter(e: React.MouseEvent): void;
                onMouseLeave(e: React.MouseEvent): void;
                onFocus(e: React.FocusEvent): void;
                onBlur(e: React.FocusEvent): void;
        }
        interface Props {
                Content: React.FC;
                Trigger: React.FC<TriggerProps>;
        }
}

Example Implementation

function Tooltip({ Content, Trigger }: Tooltip.Props) {
        const [contentIsShown, setContentIsShown] = useState(false);
        function onTriggerFocus() {
                setContentIsShown(true);
        }
        function onTriggerBlur() {
                setContentIsShown(false);
        }
        function onTriggerMouseEnter() {
                setContentIsShown(true);
        }
        function onTriggerMouseLeave() {
                setContentIsShown(false);
        }

        return (
                <div style={{ position: "relative" }}>
                        {contentIsShown && <Content />}
                        <Trigger
                                onBlur={onTriggerBlur}
                                onFocus={onTriggerFocus}
                                onMouseEnter={onTriggerMouseEnter}
                                onMouseLeave={onTriggerMouseLeave}
                        />
                </div>
        );
}

Tooltip