CODEWITHSUNDEEP
javascripthtmlcssreactjsstyled-components
antonwilhelm
antonwilhelm

Reputation: 7483

Position Tooltip div with variable height above span (React)

I am trying to build a tooltip that appears over a word in some text. It works fine if the tooltip div always has the same height. But sometimes I want to have a ton of text in there or other stuff, and sometimes it might be a single-line sentence.

I am stuck on how to code the positioning here, since I would need the height of the tooltip for that? I want the tooltip div to always be centered above the targeted word and i want the tooltip width & height to be totally variable, and never overlap the targeted word.

So far what I have is this:

const wordWithToolTip = ({ word, tooltip }) => {

    return (
        <div
            style={{ display: 'inline-block', position: 'relative', border: '2px solid red' }}
            
            onMouseEnter={() => setShowTranslation(true)}
            onMouseLeave={() => setShowTranslation(false)}>

            {showTranslation && (
                <div
                    style={{
                        position: 'absolute',
                        top: '-30px', //this works fine, but I cannot assume that 30px will always suffice. If the tooltip div gets really big, -30px won't do anything and it will overlap the word and look off. Ideally, I'd have something that says: always appear 10px above the word, and go as high as you want, but never below those 10px etc.
                        padding: '2px',
                        border: '2px solid black',
                        backgroundColor: 'white',
                    }}>
                    {tooltip}
                </div>
            )}
            <span>{word}</span>
        </div>
    );
};

Upvotes: 1

Views: 1410

Answers (1)

silencedogood
silencedogood

Reputation: 3299

In order to accomplish this, you'll need to set state for the height of the tooltip element, then adjust the top css property accordingly. Something like this would work:

const wordWithToolTip = ({ word, tooltip }) => {

const [height, setHeight] = useState("");
const tooltipEl = useRef(null);

useEffect(() => {
   const refheight = tooltipEl.current.offsetHeight;
   setHeight({ refheight });
}, []);

return (
    <div
        style={{ display: 'inline-block', position: 'relative', border: '2px solid red' }}
        
        onMouseEnter={() => setShowTranslation(true)}
        onMouseLeave={() => setShowTranslation(false)}>

        {showTranslation && (
            <div
                ref={tooltip}
                style={{
                    position: 'absolute',
                    top: '-' + height+10 + 'px', //You'll have to adjust this accordingly. 
                    padding: '2px',
                    border: '2px solid black',
                    backgroundColor: 'white',
                }}>
                {tooltip}
            </div>
        )}
        <span>{word}</span>
    </div>
);
};

The 10 would represent your margin from the tooltip to the word.

Upvotes: 1

Related Questions