How to create a tooltip for choosing text without wrapping?

Question

My ultimate goal is to create a text selection tooltip. Then the user will be able to interact with a tooltip like . Please note that I was able to accomplish this by wrapping the selected text in a tag and then creating a tooltip, but this is no longer an option for me because of some other requirements and functionality issues. If you notice in the image above in the element inspector, the selected text will not be wrapped in any tag, a tooltip will only be created above the selection. I already looked at this one and it won’t work for me because the mouse position may not coincide with the end of the selection. I need the actual position of choice.

General question: what is the best way to achieve this? More specific questions:

• Should I use selection coordinates? If so, then you can get the coordinates of the upper corners of the rectangular selection, so that I can find the middle point and create a tooltip above it.
• Is there any way to get this selection as an element? So can I just put a tooltip on this? (Note that the selection may be multiple nodes)

Answer 1

Assuming something selected

var selection = window.getSelection(), // get the selection then range = selection.getRangeAt(0), // the range at first selection group rect = range.getBoundingClientRect(); // and convert this to useful data 

rect now an object that holds positions relative to the current scroll position of the window. Read more about it here . If you want to be more precise, you can use getClientRects , which returns a list of such objects that you would need to put together to form a selection.

Now, to draw a window around it (I will use a simple route, using fixed for demonstration)

 var div = document.createElement('div'); // make box div.style.border = '2px solid black'; // with outline div.style.position = 'fixed'; // fixed positioning = easy mode div.style.top = rect.top + 'px'; // set coordinates div.style.left = rect.left + 'px'; div.style.height = rect.height + 'px'; // and size div.style.width = rect.width + 'px'; document.body.appendChild(div); // finally append 

You will probably want to take into account the scroll position so that you can use absolute positioning. If there are no other scrollable elements, this means that you just need to consider the values ​​of window.scrollX and window.scrollY , which are the position of the x and y window coordinates in pixels at the moment they are accessed.

 var div = null; function drawBorderAroundSelection() { var selection = window.getSelection(), // get the selection then range = selection.getRangeAt(0), // the range at first selection group rect = range.getBoundingClientRect(); // and convert this to useful data if (rect.width > 0) { if (div) { div.parentNode.removeChild(div); } div = document.createElement('div'); // make box div.class = 'rect'; div.style.border = '2px solid black'; // with outline div.style.position = 'fixed'; // fixed positioning = easy mode div.style.top = rect.top + 'px'; // set coordinates div.style.left = rect.left + 'px'; div.style.height = rect.height + 'px'; // and size div.style.width = rect.width + 'px'; document.body.appendChild(div); // finally append } } window.onmouseup = drawBorderAroundSelection; 

 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dolor porta neque vulputate auctor et a ligula. Quisque bibendum risus magna, eget feugiat erat faucibus sed. Phasellus sed massa elementum, laoreet ipsum non, dignissim orci. Aenean lobortis nunc et purus molestie, vel consectetur ligula dapibus. In ut lorem mattis, commodo nisi aliquam, porta ante. Curabitur sit amet libero sed justo finibus porttitor. Donec ac est ultrices, pretium diam sed, blandit nunc. Morbi consequat finibus augue vel ultricies. Vestibulum efficitur ante vitae cursus accumsan. Vestibulum rutrum ex ex, a egestas nisi malesuada eu. Pellentesque fermentum, ante id convallis luctus, tellus lectus viverra diam, sit amet convallis ligula lorem sit amet neque. </p>