Javascript 选择文本时显示工具提示

一旦选择了一个文本，我想在底部显示一个工具提示，上面写着复制！而且工具提示必须位于选择的中心。虽然我不知道如何实现工具提示，使其在选中后显示。这就是我到目前为止所做的

HTML

---

任何帮助都将不胜感激。香草javascript也是首选。

这里有一个简单的解决方案

函数getTooltipe{ e、 停止传播； var tar=e.target.getBoundingClientRect； $'.tooltip'.css{ 顶部：焦油，底部， 左：柏油 }.表演； } $document.onclick，function e{ e、 停止传播； $'.tooltip'.hide； }; .工具提示{ 位置：固定； 填充物：5px； 边框：1px实心4747； 显示：无； } 一些代码行

复制！！！

---

这样的办法应该行得通

var超时； document.querySelector.selectable.addEventListenermouseup，函数E{ var selection=document.getSelection； if！selection.toString.trim.length 回来 clearTimeouttimeout； document.execCommand'copy'； var rect=selection.getRangeAt0.getBoundingClientRect； $this.tooltipshow； var tooltipLeft=Math.maxrect.left-$'.tooltip'.width-rect.width，0； $'.tooltip'.css{ 左：工具提示左 }; var可选=此； 超时=setTimeoutfunction{ $selectable.tooltiphide； }, 1000; }; $'.selective'。工具提示{ 触发器：“手动”， 位置：'底部' }; 一些代码行

---

传统的UI/UX设计使用按钮来复制文本，也许你可以考虑这一点。现在，当你点击文本时，它会显示工具提示。试穿hover@MontyGoldy是的，我是故意这么做的。但这并不能解决选择它的问题。

<p>
   <span class="selectable" tooltip="Copied!" tooltip-position='bottom'>
    Some lines of code
   <span>
</p>

[tooltip]{
  position:relative;
  display:inline-block;
}
[tooltip]::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.9) transparent transparent;
    z-index: 99;
    opacity:0;
}
[tooltip-position='bottom']::before{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: rgba(0,0,0,0.9);
    text-align: center;
    color: #fff;
    padding:4px 2px;
    font-size: 12px;
    min-width: 80px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;
}
[tooltip-position='bottom']::after{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translateY(0%);
}

[tooltip]:active::after,[tooltip]:active::before {
   opacity:1
}