为元素动态创建工具提示

Dynamically create tooltip for an element

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

我能够动态创建 v-tooltip 组件。我在 JS 中选择了元素，但无法用 v-tooltip 组件包装它。我能够包装它，但工具提示位于页面顶部，而不是包装元素本身。我也不确定我的方法是否最好。

这是一个 JSFiddle 示例：https://jsfiddle.net/6xk7zLv9/

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

您需要在工具提示上指定辅助道具 (top/bottom/left/right)。

激活器插槽也是可选的，您可以使用 position-x 和 position-y 道具将其放置在任何您想要的位置，而无需替换 DOM 元素：https://codepen.io/kaelwd/pen/LYWLxVe?editors=1010

window.getSelection().getRangeAt(0).getBoundingClientRect()会给你当前选择的位置：https://codepen.io/kaelwd/pen/poewRaE?editors=1010
如果你想变得非常花哨，你可以调用 getClientRects 并让工具提示跟随选择的末尾：https://codepen.io/kaelwd/pen/vYxZgjb?editors=1010