问题标签 [tippyjs]

我正在使用Tippy.js。我想在 mouseenter 上显示工具提示，但在单击时将其隐藏。

当您单击一个元素时，这会触发一个工具提示，.tippy并保持打开状态，直到您单击离开。

这会在您使用鼠标进入元素时显示工具提示，并在鼠标离开元素时隐藏。.tippy.tippy

我想要两者的结合。在 mouseenter 上显示工具提示，但在我点击离开之前将其保持打开状态。

我更喜欢**不听click事件和mouseenter事件并在使用时手动显示和隐藏它{ trigger: 'manual' }

另外，请您解释一下{custom}触发选项。从文档中：

{custom}指的是你可以有任何事件监听器，但它不会有相反的“隐藏”事件。

我可以使用{custom}触发器来寻找我想要的东西吗？如何？

非常感谢！

我正在使用 Tippy.js 作为工具提示。我有几组带有工具提示的图标。美好的。问题：每个组应根据图标组的容器类以不同颜色显示工具提示。但工具提示默认情况下在 document.body 中实例化，如果我使用 appendTo 选项更改父级，例如

我收到一个错误（TypeError：this.options.appendTo.contains 不是函数）。

我正在使用 fetch api 获取内容的页面上使用tippyjs 库创建多个动态工具提示。在初始化工具提示时如何访问每个选择器上的数据属性。

这就是我所拥有的

代码

在实例化工具提示时，我需要访问每个 span 元素的数据属性。我怎么能这样做？

我正在使用 React Tippy——一个基于 Tippy.js 的 React 组件。我想使用记录在案的setIsOpen 方法- 但它不起作用。

似乎找不到与此相关的任何文档或问题。有任何想法吗？

我的代码是：

我正在使用带有嵌入式 HTML 表单的Tippy.js ，该表单相对较大。我的问题是，当我单击太靠近浏览器窗口顶部的触发器对象时，弹出器被切断。

Tippy 有一个偏移属性，看起来像我需要的，应该在 X 和 Y 轴上移动 popper，但它不会在 Y 轴上移动，只会在 X 轴上移动。

我尝试使用放置属性移动弹出器的位置，使用偏移属性移动偏移量，但我无法弄清楚。

这些是它应该是什么样子以及它看起来是什么样子的示例。

我将tippy.js 与html 模板一起使用。我的代码为：

在 html 模板中，我选择了带有 onclick 事件的标签：

我动态地将选项添加到选择中。一切似乎都很好，但我无法在任何地方到达 changeLanguage 事件，我不明白在哪里编写 changeLanguage(){...} 函数来捕获事件。我在tippy js onShow（）或其他地方添加了changeLanguage（）{...}，但无法到达事件触发器。我只收到错误消息：

未捕获的 ReferenceError：在 HTMLSelectElement.onchange 中未定义 changeLanguage

另一方面，我尝试使用事件处理

但没有成功。有没有人告诉我该怎么做，我错过了什么。

我在 jsfidd https://jsfiddle.net/s6zcn7tx/46/中对其进行了测试，但结果相同。

我有一个带有以下代码的指令

并使用如下指令

如何在 mouseenter 或 focus 上显示 Tippy，因为这些是默认触发器，从我在指令中的tippy实例，这是我console.log(this.tippy)在第 44 行时得到的

当我尝试使用时出现错误

当我从 github 的仓库中获取该指令时，如何使该指令正常工作

我在这里缺少什么，感谢您的帮助，谢谢

我正在使用TippyJS来显示 HTML 工具提示。我在工具提示中有一些交互式内容，所以我想将事件绑定到这些元素。因为工具提示内容是由 Tippy 动态生成的，所以标准的 jQuery 事件绑定似乎不起作用。

我已经建立了一个这样的例子：

HTML：

JS：

这里有一个工作的 CodePen。

我想console.log在单击工具提示内容中的按钮时执行一个操作，但无法使其正常工作。我已经尝试在 Tippy 'show' 事件中绑定按钮单击事件，就像这样，但它再次不起作用：

谁能建议如何让这个事件绑定工作？

非常感谢。

我有以下提示，在悬停时 Ajax 调用会去并获取数据，创建内容并显示它。但它不适用于动态内容，因为在页面加载时

<span class="more-tags otherPostTags" data-postId="{{$post->id}}">...</span>

在页面上是静态的，但在选项卡中也是动态的。

所以下面的代码适用于静态

<span class="more-tags otherPostTags" data-postId="{{$post->id}}">...</span>

但不适用于动态。

提示 jquery ：

我在这里想念什么？

我有以下代码，它显示了一个包含动态数据的工具提示。它工作正常，但它为所有人显示相同的工具提示。

我用过tip._tippy.destroy();有点没用。

上面显示工具提示的元素：

JS：

当我将鼠标悬停在上面时，tooptip 显示来自数据库的标签，但它在悬停时显示相同的标签/数据，数据不同，但它显示第一次悬停时出现的工具提示。