问题标签 [tippyjs]

假设我希望 Tippy.js 处理所有div文本为“悬停”的元素（我实际需要的逻辑要复杂一些）。这是我这样做的失败尝试：

https://jsfiddle.net/wz1drsem/

我可以决定return falsein onShow，但我不知道如何在此回调中访问目标元素。如果可以的话，我会检查目标 div 的文本并决定返回什么。

onTrigger回调提供了对 DOM 事件的访问（例如）mouseenter，但它不允许取消事件。

我正在使用 TippyJS 来显示一个工具提示，但由于某种原因，当第一次单击工具提示时，它的位置太靠右了，如果你的屏幕很小，它甚至会超出视野。

例子：

在我滚动一下或调整页面大小后，它会正确定位。

例子：

什么可能导致这种行为？

示例 codepen（购物车为空，但单击/滚动时仍然具有相同的行为）：https ://codepen.io/twan2020/pen/ZEBvYXv

我试过设置boundary:viewport这样的选项：

但这并没有改变什么。

我试图弄清楚如何将具有相应样式和数据的指令或组件合并到 Tippy.js 对象的内容道具中。我想拥有它，让我可以灵活地处理内容和行为以及相应工具提示的样式。我想为使用 Cytoscape.js 构建的图形的每个节点设置一个工具提示。

我在这里找到了这个页面，向我解释了如何将 Tippy.js 合并到 Cytoscape.js 节点中。我遵循了这个示例，但我不想在 Tippy 对象的 content 属性中添加内联元素，而是想添加一个指令或组件。

所以不要在这里创建内联元素，如上面提到的页面上的示例所示：

我希望它与此类似，创建一个指令或组件：

我在 SO 上找到了一个示例，它显示了这种方法，就是这个页面。

我按照这个例子，现在为每个 Tippy.object 在 content 属性中创建一个动态指令：

我的指令看起来像上面提到的 SO 页面上的示例：

这似乎有效，它确实正确添加了指令，但是，当将鼠标悬停在相应区域上时，它只显示一个空输入字段，如下所示：

我想了解的是现在。现在如何在指令内部使用带有此指令的样式来适当地设置工具提示的样式？另外，如何在指令中正确使用 Tippy.js 道具？

使用tippy.js 和jQuery。

我希望我的脚本做的是，如果用户将鼠标悬停在带有 class 的链接上，则.ajax-link应该创建一个工具提示并在悬停在链接上时显示：

这行得通，但不幸的是，它在我的实现中似乎有一些奇怪的行为。

似乎当我将鼠标悬停在链接上时，在 DOM 中创建了几个工具提示实例，而不是一个（如预期的那样）。

在检查器中，我可以看到#tippy-1（第一个也是我唯一关心的），但在那之后我还看到#tippy-2,#tippy-3等#tippy-4正在生成。

当光标离开链接时，所有实例都被销毁（如预期的那样），所以没关系，但是为什么首先生成这么多实例？我希望#tippy-1在鼠标悬停时看到，而不是其他几个。

这是一个示例，因此您可以了解我的意思-将鼠标悬停在链接上并四处晃动您的光标-同时查看 DOM 最底部的检查器-您会看到正在创建的几个实例。

我只是想让它用 id 制作一个工具提示#tippy-1。

我想在屏幕上显示许多（数百个）元素的工具提示。我不想为每个元素都有一个小实例，而是我只想使用一个实例并更改它的目标。

因此，每次触发“mouseOver”时，我都会为触发事件的 html 元素运行tippy(target, ...)，从而生成一个新的tippy 实例。当鼠标离开元素时，我使用“onUntrigger”事件销毁tippy实例。

因为我有“交互式”，如果鼠标只离开 html 元素一点点（小于 interactiveBorder 大小）并返回到元素上，则会创建一个新的tippy 实例。当我们永远离开元素时，实例被销毁，但不知何故其中一个 popper-instances 没有被销毁。下次当鼠标移过该元素并显示工具提示时，我可以在开发人员工具/元素中看到有两个带有 data-tippy-root 指令的 DIV 元素。

这是将 Tippy 与大量 HTML 元素一起使用的正确方法吗？

大家好，我在代码中显示了以下问题，实际上它不会通过将连接结果转换为 HTML 来将连接的结果返回给我，在实践中随意格式化文本。在内容中，我注意到工具提示仍然没有在内容中格式化我并没有给我任何返回只有 [object object] 正如您从 JSON 中的代码中看到的那样，我将它转换为一个数组，以便我可以为每个元素插入标签.

我正在尝试将 cytoscape 与tippy 一起使用，但它没有显示任何工具提示。它会抛出 ele.popperRef 不是函数的错误。

这是 stackblitz 链接：https ://stackblitz.com/edit/dagre-tippy?file=src%2Fapp%2Fapp.component.ts

我已经添加了所有需要的包，包括 popper.js、tippy.js 但它仍然不起作用

我想创建一个工具提示系统，它可以phpmyadmin根据数据库的类型和 ID 直接从数据库中获取动态信息。

这个想法是在同一个数据库中有几个表，例如：tbl_tooltips_help 和 tbl_tooltips_wiki，每个表都有以下记录：ID、图标、标题、描述、内容。

然后在 HTML 方面，想法是使用 Tippy 工具提示根据工具提示类型（检查要使用的表）和 ID（了解要获取的信息）来提取这些记录。

我的想法是复制一个类似于www.wowhead.com的工具提示系统，它根据 ID 为其工具提示获取动态信息。

我已经能够进行简单的 Ajax 获取，但我无法使用 Tippy 完成这项工作。

我想将 VueTippy（Tippy.js 的 vue 包装器）添加到具有如下格式的文本（HTML，存储在 DB 中）：

我希望悬停时可以显示此链接的工具提示（动态，取决于链接）。由于此工具提示将包含按钮和操作，因此我希望拥有一个 VueJS 组件。

但是如何将我的 vue 组件添加到一个简单的链接中呢？谢谢

我正在使用tippy.js https://atomiks.github.io/tippyjs/在我的完整日历中悬停时显示工具提示。现在一切都很好，但我在里面显示了客人列表，所以可以有 100 个甚至更多的客人，在这种情况下，悬停的tippy js 元素会覆盖整个页面。

我怎样才能使它可滚动？我在官方文档中找不到任何此类属性。

那么有没有办法让它可以滚动。