Javascript 如何在不换行的情况下在文本选择上创建工具提示？

我的最终目标是在文本选择上创建工具提示。然后，用户将能够与类似的工具提示交互。请注意，我可以通过将所选文本包装在标记中，然后在其上创建工具提示来完成此操作，但是由于其他一些需求和功能问题，这不再是我的选项。如果在上面的“图元检查器”中的图像中注意到，所选文本没有包装在任何类型的标记中，工具提示只是在所选内容上创建的。我已经看过了，但它对我不起作用，因为鼠标位置可能与选择结束时的位置不同。我需要实际的选择位置

一般问题：实现这一目标的最佳方式是什么？ 更具体的问题：

• 我应该使用选择的坐标吗？如果是这样的话，有没有一种方法可以得到矩形选择的上角的坐标，这样我就可以找到中点并在上面创建一个工具提示
• 有没有办法将该选择作为一个元素？所以我可以在上面放一个工具提示？（注意，选择可以是多个节点）

---

假设选择了某个对象

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

现在是一个对象，它保持相对于窗口当前滚动坐标的位置。更多关于这个的信息。如果您想更加精确，可以使用

getclientracts

，它返回此类对象的列表，然后必须将这些对象放在一起形成选择区域

现在，在它周围画一个方框（为了演示，我将使用

fixed

采用简单的方法）

您可能需要考虑滚动位置，以便使用绝对定位。如果没有其他可滚动元素，这意味着您只需要考虑

window.scrollX

和

window.scrollY

的值，这是访问窗口时以像素为单位的窗口x和y坐标的位置

var div=null；
函数drawBorderAroundSelection（）{
var selection=window.getSelection（），//然后获取选择
range=selection.getRangeAt（0），//第一个选择组的范围
rect=range.getBoundingClientRect（）；//并将其转换为有用的数据
如果（矩形宽度>0）{
如有需要（分区）{
div.parentNode.removeChild（div）；
}
div=document.createElement（'div'）；//生成框
div.class='rect'；
div.style.border='2px纯黑'；//带轮廓
div.style.position='fixed'；//fixed positioning=easy模式
div.style.top=rect.top+'px'；//设置坐标
div.style.left=rect.left+'px'；
div.style.height=rect.height+'px'；//和大小
div.style.width=rect.width+'px'；
document.body.appendChild（div）；//最后追加
}
}
window.onmouseup=drawBorderAroundSelection

Lorem ipsum dolor sit amet，是一位杰出的献身者。不，不，不，不，不。这是一个巨大的挑战，它是一个封建国家。元素之相，同色之相，奥基之尊。埃尼安·洛博蒂斯
这是一种新的疾病。在奥勒姆·马蒂斯（ut lorem mattis）的作品中，有一种叫做“阿利夸姆（Alliquam）”的通货，一种叫做“安特”（porta ante）。库拉比图坐在自由之门前。不要吃甜食，不要吃甜食。菲尼布斯奥古斯医院
乌尔特里斯。前庭效应，前庭效应，前庭效应，前庭效应。前庭芸香属植物，一种植物。佩伦特式发酵剂，前半生菌，后半生菌，后半生菌，后半生菌，后半生菌，后半生菌，后半生菌。

$（文档）.ready（函数（）{
函数tweetButtonClick（）{
让selectedText=document.getSelection（）.toString（）；
/*打开窗户(
"https://twitter.com/intent/tweet?url=https://www.linkedin.com/in/harsha-vardhan-ch-245197bb/&文本=”+
选定文本
);*/
log（“这是您选择的文本：”，selectedText）；
}
const textSelectionTooltipContainer=document.createElement（“div”）；
textSelectionTooltipContainer.setAttribute(
“身份证”，
“textSelectionTooltipContainer”
);
textSelectionTooltipContainer.innerHTML=`TWEET`；
const bodyElement=document.getElementsByTagName（“BODY”）[0]；
$（“正文”）。在（“单击”，“文本共享推特btn”，推特按钮单击）；
bodyElement.addEventListener（“鼠标”，函数（e）{
var textu=document.getSelection（）.toString（）；
如果（！textu.length）{
textSelectionTooltipContainer.remove（）；
}
});
文件
.getElementById（“textToSelect”）
.addEventListener（“鼠标”，函数（e）{
设textu=document.getSelection（）.toString（）；
设matchu=/\r |\n/.exec（textu）；
if（textu.length&！matchu）{
让range=document.getSelection（）.getRangeAt（0）；
rect=range.getBoundingClientRect（）；
scrollPosition=$（窗口）.scrollTop（）；
containerTop=scrollPosition+rect.top-50+“px”；
containerLeft=rect.left+rect.width/2-50+“px”；
textSelectionTooltipContainer.style.transform=
“translate3d”（“+containerLeft+”、“+containerTop+”、“+”0px）”；
bodyElement.appendChild（textSelectionTooltipContainer）；
}
});
});
#文本选择ToolTipContainer{
改变：转变；
位置：绝对位置；
宽度：100px；
高度：40px；
背景#f7d39d；
顶部：0px；
左：0px；
显示器：flex；
填充物：5px10px；
框大小：边框框；
证明内容：中心；
}
#textSelectionTooltipContainer按钮{
字体大小：14px；
边框：1px纯黑；
背景：无；
光标：指针；
边际：0.2px；
}

文本共享功能
HTML Ipsum呈现
佩伦茨克居民莫比·特里斯蒂克（morbi tristique）塞内特斯（Sentecus et netus）和马莱苏阿达（malesuada）是一位著名的土耳其人。前庭侵权法庭、封建法庭、别有用心法庭
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