问题标签 [v-tooltip]

我需要 Vue.js 包 v-tooltip ( https://akryum.github.io/v-tooltip/#/ ) 的帮助。

我阅读了文档并查看了网站上的示例，并且我的测试工作完美：

现在，在我的站点中，我无法像这个示例那样插入 HTML 标记，但在我的组件中，我得到了一个属性data-content。这个属性是一个包含带有v-tooltip指令的 HTML 标记，所以我用这种方式打印它：

内容是使用 WISIWIG 编辑器创建的，经过修改以添加工具提示元素的自定义标记；我的 vue 组件只是得到这个字符串变量。

此操作的结果是v-tooptip指令未“读取”，并且工具提示不显示。通过检查器，我可以看到两个示例之间的区别：在第一个示例中，我可以看到<a data-v-00f96b30="" href="#" class="tooltip-link has-tooltip" data-original-title="null">tooltip special link</a>(v-tooltip 指令已处理，工具提示已激活)，在第二个示例中，我可以看到<div data-v-00f96b30="" class="rte general-typo"><a href="#" v-tooltip="{content: 'Tooltip Content',placement: 'top-center',delay: {show: 400,hide: 400,},}" class="tooltip-link">tooltip special link</a></div> .

如何“强制”激活我的指令？

我使用了这个参考： https : //stackoverflow.com/a/53108600 在内部 v-tooltip 悬停时关闭外部 v-tooltip。
问题是这种方法只有在有一个容器要处理时才优雅。
当您开始拥有许多容器时，您必须在 vue 中为每个容器创建一个数据变量。
代码示例： https
://jsfiddle.net/jyts1fug/6/ 如小提琴所示，我现在有 2 个变量，isOpen并且isOpen2.
我想为此找到一个更优雅的解决方案。

我正在使用 Vuejs 2 和 v-tooltip npm 包。我想仅在禁用按钮时显示 v-tooltip。当它没有被禁用时，我根本不想显示 v-tooltip。

我正在使用 vue 2.6.12 、 v-tooltip 2.1.3 和 vue-multiselect 2.1.6。我需要将多选组件显示到 popover 组件中，但它没有显示任何内容，但是当我将它放在 popover 组件之外时，它可以正常工作。

在具有多个 ASCX 用户控件的 ASP.NET Web 窗体环境中显示 v-tooltip 时出现问题，每个控件都是 vue.js 控制器。当在同一个 ASPX 页面上使用多个 Vue 控制器时（在我的情况下，这些控制器位于单独的 ASCX 文件中）并且每个控制器都注册 vtooltip

然后工具提示仅显示在第一个组件上。当我没有在第一个 vue 控制器上注册 VTooltip 时，它们会出现在第二个控制器上，但不会出现在下面的控制器上。

除了在后续的 vue.js 控制器（ASCX 用户控件）中没有显示提示之外，所有控制器都按预期工作，功能，按钮单击都正常，数据正确显示，浏览器控制台中没有错误或相关警告。

我想了解发生了什么冲突以及如何使工具提示出现在所有 vue 控制器和其中的 vue 组件上？

v-popover 组件在将元素包装在其中时效果很好，例如：

但是我想为 v-popover 组件指定目标元素而不包装元素。这个弹出框是在一个组件中生成的，该组件在页面上被多次实例化，每个都有自己唯一的 ID 和弹出框。

在阅读了popover 组件参考和这个 GitHub 讨论之后，“容器”或“目标”选项听起来像是解决方案。我努力了：

和

但弹出窗口没有出现。我已经在 html 中确认组件 ID 正在正确生成并填充到弹出框的属性中。什么不见​​了？