为元素动态创建工具提示

Question

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

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

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

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

Answer 1

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

激活器插槽也是可选的，您可以使用 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

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt https://developer.mozilla.org/en-US/docs/Web/API/Range/getClientRects