问题标签 [tippyjs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
96 浏览

javascript - 如何在加载时编辑提示工具提示内容innerHTML

我正在尝试使用tippy来创建一个工具提示,我认为这是一个相对简单的用例。

当我的页面加载时,我有一个调用简单 API 来获取数据的 js 脚本,它返回数据并出于多种原因使用它。一个原因是将其添加到如下提示工具提示中:

我的小费脚本是:

还有我的 HTML:

出现Hi,但在控制台日志中,我的 onload 脚本找不到info_html要编辑的 div innerInfo-Cannot set property 'innerHTML' of null

我不想为tippy触发器上的数据调用API。谁能指出我正确的方向,以便能够在页面加载时编辑提示内容的 innerHTML?

仅供参考 - HTML 代码的顺序:HTML 第一,onload.js 第二,tippy 第三

提前致谢!

0 投票
1 回答
149 浏览

reactjs - TS2739:无法在 typescript 中使用扩展 TippyProps 的自定义 Tippy 包装器

我们维护两个独立的存储库作为库。两者都在使用 reactjs。一个是纯组件库,而另一个包含可共享的模块。

我开始在这两个库中集成打字稿。

这是在组件库中命名Tippy.tsx的Tippy 包装器。

此代码构建成功。但是当我尝试在模块库中使用这个组件时,打字稿只承认钩子样式道具。来自tippy PropTypes 的所有其他道具都会抛出错误。

例如以下代码

投掷

TS2739:类型'{孩子:元素;内容:字符串;主题:字符串;}' 缺少类型 'TippyType' 的以下属性:hook、'style'

这里是自动生成的声明文件tippy.d.ts

这里是TippyProps

0 投票
0 回答
205 浏览

vue.js - v-tippy 未显示在禁用的元素上

如果它所在的元素被禁用,指令 v-tippy 将不起作用。

我发现有些人通过将按钮包装到另一个元素中并在其上放置工具提示来绕过它,但我真的不想这样做。

还有其他方法吗?

0 投票
2 回答
294 浏览

javascript - Tippy.JS“TypeError:instance.setContent 不是函数”

当我尝试在 Tippy.JS 中设置工具提示的内容时,我收到错误消息TypeError: instance.setContent is not a function

这是我的代码:

0 投票
1 回答
183 浏览

javascript - Tippy.js 内容的问题

我直接从tippy.js 文档中获取了这个例子:

我似乎无法使该content选项起作用;但是如果我在按钮元素中放置一个标题属性,就会出现提示工具提示!

0 投票
1 回答
179 浏览

angular - Tippy/NgNeat/Helipopper 如何在 Angular 11 中单击时关闭

我在 Tippy.js 上使用 ngneat/helipopper 包装器来创建上下文菜单。一切都很好,除了当我选择一个项目时我无法关闭菜单。Github在这里:https ://github.com/ngneat/helipopper

我已经尝试了十几种变体,包括推荐的withContextMenuVariation功能(似乎没有做任何事情)。

我有一个使用ng-templatetippy版本的跨度。模板有一个组件(因为我需要将一堆输入传递给菜单组件)。

这是跨度。这个特殊的变体是一个自定义的变体,所以我完全有可能在配置中出错,但标准popperVariation也有同样的“不会关闭”问题。

Tippy 变化(当前):

0 投票
1 回答
117 浏览

html - tippy.js popover 隐藏在事件槽后面

我正在使用FullCalendar,并且我只是将tippyJs 集成到popover中。它存在与似乎是 zIndex 相关的布局问题。我附上了我的问题的截图。您可以看到弹出框隐藏在事件包装器后面。另外它也是不可点击的。我可以使用一些帮助来显示任何上方的完整弹出框。非常感谢您的帮助。谢谢在此处输入图像描述

0 投票
0 回答
365 浏览

javascript - 当单击按钮进入带有角度和 Fullcalendar 的工具提示时,请继续关注 Tippy.js

我需要关于 fullcalendar 和 tippyjs 的建议(https://atomiks.github.io/tippyjs/)。所以,这是我进入全日历的事件:

在此处输入图像描述

所以你可以看到当鼠标悬停在事件上时,我会像这样显示tippy js:

}

这是我的html代码:

问题是,我无法单击按钮或选择...每次单击我的事件返回都是在 fullcalendar 事件上,但不是tippy js按钮...我该如何解决这个问题?打开时,我只需要将点击焦点放在tippy js的工具提示上。

谢谢

0 投票
0 回答
27 浏览

php - 如何在 data-tippy-html 下重新加载信息?

我有简单的按钮:

在另一个文件中,我对此有非常简单的结构

但看起来我无法使用 js 更新该 div 的内容

0 投票
1 回答
139 浏览

html - 关闭 Tippy Tooltip 会触发下方的链接

如果一个 Tippy 工具提示恰好显示在链接上,那么单击工具提示也会意外触发底层链接。

(如果您更喜欢https://codepen.io/mpoo/pen/LYLGVBP?editors=1000,也可以作为笔使用)

我希望有一个 Tippy Prop 可以避免这种行为,但似乎没有。

如何防止锚触发?