为元素动态创建工具提示 [英] Dynamically create tooltip for an element

问题描述

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

I am trying to show a tooltip when user selects random text on the page - think of annotating text.

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

I was able to dynamically create v-tooltip component. I have selected element in JS, but having trouble wrapping it with v-tooltip component. I was able to wrap it, but the tooltip is positioned to the top of the page, not on the wrapped element itself. I am also not sure my approach is the best one either.

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

Here is a JSFiddle example: https://jsfiddle.net/6xk7zLv9/

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

Is there better way to dynamically generate Vue components and insert into the DOM? How can I correctly attach tooltip to the selected element.

推荐答案

您需要在工具提示上指定一个侧边道具(上/下/左/右).

You need to specify a side prop (top/bottom/left/right) on the tooltip.

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

The activator slot is also optional, instead you can use the position-x and position-y props to place it wherever you want without replacing DOM elements: 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

window.getSelection().getRangeAt(0).getBoundingClientRect() will give you the position of the current selection: https://codepen.io/kaelwd/pen/poewRaE?editors=1010
If you want to get really fancy you can call getClientRects instead and have the tooltip follow the end of the selection: https://codepen.io/kaelwd/pen/vYxZgjb?editors=1010

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelectionhttps://developer.mozilla.org/en-US/文档/Web/API/Selection/getRangeAthttps://developer.mozilla.org/en-US/docs/Web/API/Range/getClientRects

这篇关于为元素动态创建工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！