Javascript 动态创建元素的工具提示

我试图在用户选择页面上的随机文本时显示工具提示——想想注释文本

我能够动态创建

v-tooltip

组件。我已经在JS中选择了元素，但在使用

v-tooltip

组件包装它时遇到了问题。我能够包装它，但工具提示位于页面顶部，而不是包装的元素本身。我也不确定我的方法是否是最好的

下面是一个JSFIDLE示例：

---

是否有更好的方法动态生成Vue组件并插入DOM？如何将工具提示正确附加到所选元素。

您需要在工具提示上指定一个侧支撑（上/下/左/右）

activator插槽也是可选的，相反，您可以使用

position-x

和

position-y

道具将其放置在任意位置，而无需替换DOM元素：

window.getSelection（）.getRangeAt（0.getBoundingClientRect（）

将为您提供当前选择的位置：
如果您想获得真正的乐趣，可以调用

getClientRects

，让工具提示跟随在选择的末尾：