Css 如何设置元素相对于另一个元素中选定文本的xy位置？

我试图在文本区域中创建一个简单的工具提示元素。其思想是，工具提示应该显示所选内容。到目前为止，我的代码是：

import React, { useRef, useState } from 'react';

const Contact = () => {
    const myref = useRef();
    const [tooltip, setTooltip] = useState('');

    const handleMouseUp = (e) => {
        if (window.getSelection().toString() !== '') {
            myref.current.style.display = "inline-block";
            myref.current.style.background = "black";
            myref.current.style.color = "white";
            setTooltip(window.getSelection().toString());

            myref.current.style.top = e.clientY + "px";
            myref.current.style.left = e.clientX + "px";
        }
    }

    return (
        <div className="contact">
            <h2>Contact</h2>

            <textarea
               rows="10" cols="100"
               onMouseUp={handleMouseUp}
               value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet vestibulum odio. Morbi porttitor, ante fermentum condimentum porta, elit tellus blandit lorem, eu porttitor turpis lectus sed urna. Morbi semper, velit luctus finibus aliquam, orci orci commodo velit, ut ultrices ligula ex id nulla. Quisque enim leo, mollis a consectetur quis, vestibulum id eros. Integer non vehicula ligula. Nulla eu quam consectetur, elementum felis rutrum, lobortis dolor. Mauris laoreet egestas orci, at posuere odio sagittis sagittis. Sed consequat urna turpis, ut tincidunt nunc posuere sit amet. In dui leo, euismod et tempus sed, sodales vitae nisi. Nam faucibus aliquet condimentum. Curabitur scelerisque, quam in dignissim mattis, erat felis ultrices metus, et sagittis purus magna quis magna."
            />

            <div ref={myref} style={{ display: 'none', position: 'absolute' }}>{tooltip}</div>

        </div >
    )
}

export default Contact;

import React，{useRef，useState}来自“React”；
常量联系人=（）=>{
const myref=useRef（）；
const[tooltip，setTooltip]=useState（“”）；
常数handleMouseUp=（e）=>{
if（window.getSelection（）.toString（）！=''）{
myref.current.style.display=“内联块”；
myref.current.style.background=“黑色”；
myref.current.style.color=“白色”；
setTooltip（window.getSelection（）.toString（））；
myref.current.style.top=e.clientY+“px”；
myref.current.style.left=e.clientX+“px”；
}
}
返回(
接触
{工具提示}
)
}
导出默认联系人；

---

但我无法使工具提示位置正好位于选定文本下方。有什么想法吗？

getBoundingClientRect似乎能奏效

import React, { useRef, useState } from 'react';

const Contact = () => {
    const myref = useRef();
    const myref2 = useRef();
    const [tooltip, setTooltip] = useState('');

    const handleMouseUp = (e) => {
        console.log(e.current);
        if (window.getSelection().toString() !== '') {
            myref.current.style.display = "inline-block";
            myref.current.style.background = "black";
            myref.current.style.color = "white";
            setTooltip(window.getSelection().toString());

            myref.current.style.left = (e.clientX - myref2.current.getBoundingClientRect().left) + "px";
            myref.current.style.top = (e.clientY - myref2.current.getBoundingClientRect().top) + "px";
        }
    }

    return (
        <div className="contact" ref={myref2}>
            <h2>Contact</h2>

            <textarea
                rows="10" cols="100"
                // onMouseUp={handleMouseUp}
                onChange={() => { }}
                onMouseUp={handleMouseUp}
                value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet vestibulum odio. Morbi porttitor, ante fermentum condimentum porta, elit tellus blandit lorem, eu porttitor turpis lectus sed urna. Morbi semper, velit luctus finibus aliquam, orci orci commodo velit, ut ultrices ligula ex id nulla. Quisque enim leo, mollis a consectetur quis, vestibulum id eros. Integer non vehicula ligula. Nulla eu quam consectetur, elementum felis rutrum, lobortis dolor. Mauris laoreet egestas orci, at posuere odio sagittis sagittis. Sed consequat urna turpis, ut tincidunt nunc posuere sit amet. In dui leo, euismod et tempus sed, sodales vitae nisi. Nam faucibus aliquet condimentum. Curabitur scelerisque, quam in dignissim mattis, erat felis ultrices metus, et sagittis purus magna quis magna."
            />

            <div ref={myref} style={{ display: 'none', position: 'absolute' }}>{tooltip}</div>

        </div >
    )
}

export default Contact;

import React，{useRef，useState}来自“React”；
常量联系人=（）=>{
const myref=useRef（）；
常量myref2=useRef（）；
const[tooltip，setTooltip]=useState（“”）；
常数handleMouseUp=（e）=>{
控制台日志（e.current）；
if（window.getSelection（）.toString（）！=''）{
myref.current.style.display=“内联块”；
myref.current.style.background=“黑色”；
myref.current.style.color=“白色”；
setTooltip（window.getSelection（）.toString（））；
myref.current.style.left=（e.clientX-myref2.current.getBoundingClientRect（）.left）+“px”；
myref.current.style.top=（e.clientY-myref2.current.getBoundingClientRect（）.top）+“px”；
}
}
返回(
接触
{ }}
onMouseUp={handleMouseUp}
价值观="奥迪奥前庭、莫尔比·波特、前发酵调味品波特、布朗迪特·勒姆、欧式波特、欧式波特、塞姆比·森佩尔、韦利特·卢克图斯·阿利奎姆、奥奇·奥奇·奥奇·奥奇、奥奇·埃尼·利奥、莫利斯·奥奇、莫利斯·阿利斯特·奎斯特·奎斯、莫利·阿奎斯特·奎斯、莫利·阿奎斯·阿奎斯特·阿奎斯、莫利·阿奎斯特·阿奎斯·阿奎斯·阿奎斯特·阿奎斯、莫利·阿奎斯·阿奎斯·阿奎斯·阿奎斯特厄洛斯之母。整数非车辆舌苔。无需连续行走，猫咪之母，多洛之母。奥古斯塔斯·奥里斯·拉奥里特·埃古斯塔斯·奥奇，在波苏尔·奥迪奥·萨吉提斯·萨吉提斯·奥迪奥·萨吉提斯·萨吉提斯。乌尔纳·图皮斯之母，但在波苏尔·利奥，尤伊斯莫德和坦普斯·塞德，苏打维塔·尼西。南·福西布·阿利奎特调味品。库拉比托·斯克利斯你是马蒂斯的贵人，你是我的女朋友，你是我的女朋友，你是我的女朋友。”
/>
{工具提示}
)
}
导出默认联系人；