tippyjs使用中遇到的问题（设置interactive:true报错、主题不生效问题）

已于 2023-05-18 10:11:12 修改
阅读量591 收藏
点赞数
文章标签： tippyjs 前端可视化
于 2023-05-17 18:43:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lingliu0824/article/details/130732064
版权
在使用Cytoscape.js集成tippyjs插件时遇到两个问题：一是提示框的标签选中问题，通过设置`interactive:true`并添加`appendTo:document.body`解决了标签层级冲突导致的选中错误；二是自定义主题不生效，通过引入对应主题的样式文件实现了正确显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用Cytoscape.js的时候用到了tippyjs插件

1.提示框的标签无法选中，选中时直接选到了后面层级的标签

看文档可以设置 interactive属性为true解决
在这里插入图片描述
但是设置后弹出框无法弹出且报错：Cannot read properties of null reading ‘contains’
在这里插入图片描述
解决：
添加appendTo属性（dom节点）这里使用的是document.body
在这里插入图片描述

2.设置主题未生效问题

设置了主题theme: 'light’但是未显示相应的样式
解决：引入相应的主题样式文件
在这里插入图片描述

Elasticsearch设置密码报错:ERROR: X-Pack Security is disabled by configuration.
猿小白的博客
09-04 978
X-Pack 安全功能在你的 Elasticsearch 配置中被禁用了。你需要在 elasticsearch.yml 文件中启用 X-Pack 安全功能，然后重启 Elasticsearch 以使更改生效。打开 elasticsearch.yml 文件，通常位于 Elasticsearch 安装目录的 config 文件夹中。保存并关闭 elasticsearch.yml 文件。然后重启Elasticsearch。
Python-PyCharm 报错解决：ImportError: cannot import name 'InteractiveConsole' from 'code'
个人博客
01-20 5878
此文首发于我的个人博客：Python-PyCharm 报错解决：ImportError: cannot import name ‘InteractiveConsole’ from ‘code’ — zhang0peter的个人博客 早上在用PyCharm跑Python代码时遇到报错： Traceback (most recent call last): File "C:\Users\pete...
Tippy.js一个轻量级的纯JS库工具提示(tooltip)库
08-07
Tippy.js 一个轻量级的,纯JS库工具提示(tooltip)库
js修改样式_JavaScript效果非常棒的提示组件——Tippy.js
weixin_39875941的博客
12-03 572
简要介绍Tippy.js是JavaScript用于提示作用的轻量级组件，提供基于按钮、菜单等HTML元素的提。其扩展功能非常强大，可以提供位置修改、动画、箭头样式、弹出特效、延迟显示、主题修改与嵌套提示等功能。它是独立的没有依赖的组件。目前最新版本：v6.2.7。Github地址https://github.com/atomiks/tippyjs特性智能：优化的定位引擎，可防止翻转和溢出通用：适用...
Vue + Tippy.js 打造高定制浮层提示组件（Tooltip/Popover）
最新发布
idree的博客
04-22 1203
Vue + Tippy.js 打造高定制浮层提示组件（Tooltip/Popover）
js悬浮二级菜单代码_Tippy.js - 免费开源且高度可定制的气泡提示独立组件
weixin_39540426的博客
12-03 187
推荐一个非常优秀的 web 气泡提示独立UI组件。 介绍Tippy.js 是一款用于Web的完整工具提示，弹出菜单，下拉菜单和菜单解决方案。适用于鼠标，键盘和触摸输入。Tippy.js 官网截图特点超轻量的纯 javascript 实现，无依赖； 不仅支持纯文本提示，也支持强大的html内容，支持嵌套；除了IE都支持，浏览器兼容性好，在低端设备也能够保持很高的性能；通过自定义CSS样式进行高度定制...
推荐一款前端轻量级的toolTip插件-Tippy.js
付出总会有收获!
12-06 4936
安利一款轻量的tooltip插件，使用简单，扩展性好，而且作者一直都有更新维护，用在项目中最好不过了。 官方GitHub : https://github.com/atomiks/tippyjs 简要教程(如下) ：   安装 可以通过npm来安装在Tippy.js插件。 npm install --save t
Tippy.js - 免费开源且高度可定制的气泡提示独立组件
那些免费的砖
09-05 892
推荐一个非常优秀的 web 气泡提示独立UI组件。 介绍 Tippy.js 是一款用于Web的完整工具提示，弹出菜单，下拉菜单和菜单解决方案。适用于鼠标，键盘和触摸输入。 特点 超轻量的纯 javascript 实现，无依赖； 不仅支持纯文本提示，也支持强大的html内容，支持嵌套； 除了IE都支持，浏览器兼容性好，在低端设备也能够保持很高的性能； 通过自定义CSS样式进行高度定制，包括额外的主题和酷炫的动画。 使用体验 这是一个几乎包含所有能想到的气泡提示组件该有的功能，并且仍然保持清亮简洁的一个.
Part 3 ROS报错问题收集1
08-08
在这个“Part 3 ROS报错问题收集1”中，我们集中讨论了几个在使用ROS开发过程中遇到的常见问题及其解决方法。 1. **找不到manipulation_msgs和household_msgs**： 当尝试运行`roslaunch marm_description view_arm...
解决calibre DRC导入问题：路径、参数与许可证配置指南
在处理Cadence Calibre进行DRC（Design Rule Checking）验证过程中，用户可能会遇到一系列设置问题。这些问题主要包括： 1. 问题1：访问文件错误 - 当导入新的工艺库时，报错"problem with access, file type, or ...
JDBC数据库连接本地数据库的报错问题：Communications link failure
qq_41907816的博客
04-08 6130
关于jdbc数据库编程连接本地数据库的异常报错，我找了三天才找到根本原因；现分享给各位菜鸟，少走弯路。 我在做mybatis项目整合数据库时，运行时报错： 看报错原因就是数据库驱动问题；检查数据库连接配置，没有问题。 于是网上查找资料，答案都大概一样，我试了下，还是不行。 然后我手写一个简单的jdbc数据库测试本地连接，看看是否连接上： 手写一个简单的数据库连接也是连接不上，总是报错...
tippyjs：工具提示，弹出框，下拉菜单和菜单库
02-25
Tippy.js Web的完整工具提示，弹出框，下拉菜单和菜单解决方案 演示和文档 :right_arrow: 安装 包装经理 # npm npm i tippy.js # Yarn yarn add tippy.js 导入tippy构造函数和核心CSS： import tippy from 'tippy.js' ; import 'tippy.js/dist/tippy.css' ; CDN < script src =" https://unpkg.com/@popperjs/core@2 " > </ script > < script src =" https://unpkg.com/tippy.js@6 " > </ script > 核心CSS捆绑了默认的unpkg导入。 用法 有关详细的使用信息， 。 组件包装 React： 执照 麻省理工学院
推荐开源神器：Tippy.js - 完整的Web提示、弹出框和下拉菜单解决方案
gitblog_00013的博客
08-09 778
推荐开源神器：Tippy.js - 完整的Web提示、弹出框和下拉菜单解决方案 项目地址:https://gitcode.com/gh_mirrors/ti/tippyjs 项目简介 Tippy.js是一个功能强大的JavaScript库，它为Web开发者提供了全面的提示、弹出窗口、下拉菜单和菜单解决方案。这个库以其灵活性和可定制性著称，能够帮助您轻松创建优雅、交互性强的组件，提升网站用户体验。...
Tippy.js 使用教程
gitblog_01139的博客
08-09 1288
Tippy.js 使用教程 tippyjsTooltip, popover, dropdown, and menu library项目地址:https://gitcode.com/gh_mirrors/ti/tippyjs 项目介绍 Tippy.js 是一个高度可定制的工具提示和弹出框库，由 Popper.js 驱动。它提供了元素“弹出”文档流的逻辑和可选样式，并浮动在目标元素旁边。Tippy....
tippy.js_Tippy.js的指令包装
cuk5340的博客
07-31 1096
tippy.js VueTippy (VueTippy) Directive wrapper for Tippy.js. Tippy.js的指令包装。 View Demo 查看演示 View Github 查看Github 安装 (Installation) npm install --save vue-tippy # or yarn add vue-tippy 用法 (Usage)...
Tippy.js for React：增强网页交互性的开源工具
gitblog_00185的博客
11-27 460
Tippy.js for React：增强网页交互性的开源工具 tippyjs-react React component for Tippy.js (official) 项目地址: https://gitcode.com/gh_...
动态提示工具插件库——tippyjs
yuxingwu9872的博客
05-01 692
Tippyjs轻量的纯 JavaScript 动态提示工具插件库。它提供了大量的不同悬停效果和超过 20 个可定制的选项。包括工具提示、弹出框、下拉菜单和菜单库。
Tippy.js for React：轻盈交互，打造顶级提示体验
gitblog_00447的博客
08-23 525
Tippy.js for React：轻盈交互，打造顶级提示体验 tippyjs-reactReact component for Tippy.js (official)项目地址:https://gitcode.com/gh_mirrors/ti/tippyjs-react 在数字界面设计中，微交互的精致程度往往决定了用户体验的质量。Tippy.js，作为一款成熟的网页浮动元素解决方案，以其强大...
科普下Tippy.js - 开源且高度可做空间php的气泡翻译器
01-19 946
Nacos致力于帮助您发现、配置和管理微服务。Nacos提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据及流量管理。Nacos帮助您更敏捷和容易地构建、交付和管理微服务平台。Nacos是构建以“服务”为中心的现代应用架构 (例如微服务范式、云原生范式) 的服务基础设施。 接下来主要介绍Nacos作为注册中心的使用和注册部分的源码解析。 Nacos安装 Nacos预装环境 Nacos 依赖 Java 环境来运行。如果您是从代码开始构建并运行Nacos，还需要为此配置 Maven环境
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值