javascript - 为元素动态创建工具提示

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