Passing in Custom Props to ToolTips

[andy-t-wang]

I have some tooltip that I'm trying to use to render a custom edit screen.

Tooltip

const Tooltip = (props: any) => {
    const buttonRef = useRef(null);
    const handleDoubleClick = () => {
        const selection = window.getSelection();
        if (!selection) { return }
        const range = document.createRange();
        // @ts-ignore
        range.selectNodeContents(buttonRef.current);
        selection.removeAllRanges();
        selection.addRange(range);
    };
    console.log(props.question)
    return (
        <Popover trigger="hover">
            <PopoverTrigger >
                <a ref={buttonRef} onDoubleClick={handleDoubleClick} className="text-red-600">{props.children}</a>
            </PopoverTrigger>
            <Portal >
                <PopoverContent className="border-none mt-1 shadow-lg bg-white p-6 rounded-lg">
                    <PopoverHeader className='font-semibold mb-2'>
                        <div className="flex items-center">
                            <BsFillCircleFill className="text-red-500 text-[8px] mr-1" />
                            Add more detail
                        </div>
                    </PopoverHeader>
                    <PopoverBody className="">
                        <div className="mb-4">
                            Tell us about a time when her adaptability really shined?
                        </div>
                        <div className="font-bold">AI Suggested Topics</div>
                        <div className="mt-4 text-center">
                            {/* Replace with your microphone icon */}
                            🎤
                        </div>
                    </PopoverBody>
                </PopoverContent>
            </Portal>
        </Popover>
    )
}

Highlight Component

 if ('main' in item.highlights) {
        const main: HighlightItem[] = item.highlights['main'].map((text) => ({ highlight: text, className: 'bg-transparent text-green-600' }))
        const improve: HighlightItem[] = item.highlights['need_anecdote'].map((text) => ({ highlight: text.phrase, className: 'bg-transparent text-red-600', component: Tooltip, question: text.question }))
        question = item.highlights['need_anecdote'].map((text) => text.question)

        highlight = [...main, ...improve]
    }

    return (
        <div className='p-3'>
            <div className="text-[#009A58] font-bold py-2">Section {index + 1}</div>
            <div className="font-semibold text-2xl py-2">{titles[index]}</div>
            {/* @ts-ignore */}
            <HighlightWithinTextarea onChange={handleEdit} highlight={highlight} value={item.answer} questions={question} />
        </div>
    )

This is my HighlightComponent. I'm trying to pass in questions as well as an edit function call that will modify state to each item in the improve list. But right now I can't seem to pass any props into the tooltip component. How can I do this?

[bonafideduck]

My original intention was that the highlight would be generic and you could use the text property to make decisions. But I think you can still accomplish what you need.

Try replacing component: Tooltip, question: text.question, with something like component: (props) => <Tooltip question={{question}}>{{props.children}}</Tooltip>,.

Let me know if that works.

[andy-t-wang]

Worked thanks!