How to set elements xy-position relative to selected text in another element? - css

Question

Im trying to make a simple tooltip element in a textarea. The idea is, that the tooltip should show what is selected. My code so far is:
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;
But I cant make the tooltip position just under the selected text. Any ideas?

Answer 1

getBoundingClientRect seem to do the trick.
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;