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

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

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

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

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

2.设置主题未生效问题

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

小玲子小玲子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Tippy.js一个轻量级的纯JS库工具提示(tooltip)库
08-07
Tippy.js 一个轻量级的,纯JS库工具提示(tooltip)库
js修改样式_JavaScript效果非常棒的提示组件——Tippy.js
weixin_39875941的博客
12-03 489
简要介绍Tippy.js是JavaScript用于提示作用的轻量级组件，提供基于按钮、菜单等HTML元素的提。其扩展功能非常强大，可以提供位置修改、动画、箭头样式、弹出特效、延迟显示、主题修改与嵌套提示等功能。它是独立的没有依赖的组件。目前最新版本：v6.2.7。Github地址https://github.com/atomiks/tippyjs特性智能：优化的定位引擎，可防止翻转和溢出通用：适用...
推荐开源项目：VueTippy - 强大的Vue 3 tooltip库
最新发布
gitblog_00038的博客
05-18 559
推荐开源项目：VueTippy - 强大的Vue 3 tooltip库 项目地址:https://gitcode.com/KABBOUCHI/vue-tippy 项目介绍 VueTippy是一个专为Vue.js 3设计的Tippy.js封装库，它提供了一种优雅的方式来创建和自定义tooltip组件。作为一个高效的工具提示解决方案，VueTippy通过指令和组件的形式无缝集成到你的Vue应用中，使你...
js悬浮二级菜单代码_Tippy.js - 免费开源且高度可定制的气泡提示独立组件
weixin_39540426的博客
12-03 127
推荐一个非常优秀的 web 气泡提示独立UI组件。 介绍Tippy.js 是一款用于Web的完整工具提示，弹出菜单，下拉菜单和菜单解决方案。适用于鼠标，键盘和触摸输入。Tippy.js 官网截图特点超轻量的纯 javascript 实现，无依赖； 不仅支持纯文本提示，也支持强大的html内容，支持嵌套；除了IE都支持，浏览器兼容性好，在低端设备也能够保持很高的性能；通过自定义CSS样式进行高度定制...
推荐一款前端轻量级的toolTip插件-Tippy.js
付出总会有收获!
12-06 4770
安利一款轻量的tooltip插件，使用简单，扩展性好，而且作者一直都有更新维护，用在项目中最好不过了。 官方GitHub : https://github.com/atomiks/tippyjs 简要教程(如下) ：   安装 可以通过npm来安装在Tippy.js插件。 npm install --save t
Tippy.js - 免费开源且高度可定制的气泡提示独立组件
那些免费的砖
09-05 654
推荐一个非常优秀的 web 气泡提示独立UI组件。 介绍 Tippy.js 是一款用于Web的完整工具提示，弹出菜单，下拉菜单和菜单解决方案。适用于鼠标，键盘和触摸输入。 特点 超轻量的纯 javascript 实现，无依赖； 不仅支持纯文本提示，也支持强大的html内容，支持嵌套； 除了IE都支持，浏览器兼容性好，在低端设备也能够保持很高的性能； 通过自定义CSS样式进行高度定制，包括额外的主题和酷炫的动画。 使用体验 这是一个几乎包含所有能想到的气泡提示组件该有的功能，并且仍然保持清亮简洁的一个.
aes-interactive:工作正在进行中
06-23
标题中的“aes-interactive”指的是一个交互式的AES算法演示工具，它允许用户逐步了解和操作AES的各个步骤。这样的工具通常使用图形化界面和可视化技术，让用户能够清晰地看到每个阶段的数据变化，有助于深入理解...
pytest-interactive:交互式选择要使用IPython运行的测试
05-18
pytest互动 一个pytest插件，用于交互式选择要使用IPython运行的测试。 阅读以了解更多信息！ 安装 pip install pytest-interactive 用法 运行pytest与--interactive或速记--ia
interactive:互动游乐场
05-30
标签中提到的"javascript playground"表明该平台专注于JavaScript的实践，这是一个广泛使用的编程语言，尤其在前端开发中，用于控制网页的行为。"math"标签则提示我们可以在这个游乐场中探索和应用各种数学概念，如...
C#中WebBrowser.DocumentCompleted事件多次调用问题解决方法
09-03
然而，在实际使用过程中，开发者可能会遇到WebBrowser.DocumentCompleted事件被多次调用的问题。本文将深入探讨这个问题，以及提供三种不同情况下的解决方案。 首先，让我们理解为什么DocumentCompleted事件会多次...
interactive-command:在所有操作系统中以交互方式运行命令
05-30
交互式命令 在所有操作系统（包括 Windows）上以交互方式运行命令。 它使用child_process.spawn和child_process.spawnSync函数来... 如果您不想使用/s标志（仅适用于 Windows，默认值为true ），则suppressblank设置
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.zip
09-02
前端项目-tippy.js,Vanilla JS Tooltip Library
tippy.js工具提示插件.zip
07-04
tippy.js工具提示插件，提供多种动画效果和主题效果，并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。
tippy.js工具提示插件
06-24
tippy.js工具提示插件，提供多种动画效果和主题效果，并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。
yargs-interactive:对yargs的交互式支持
05-02
对于对人类和非人类使用相同的CLI（例如CI工具）很有用。 还支持混合模式（是！）。 此工具可帮助您构建命令行工具，而无需担心解析参数或开发逻辑来询问它们。 安装 npm install -S yargs-interactive 然后，将此...
tippy.js_Tippy.js的指令包装
cuk5340的博客
07-31 987
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)...
动态提示工具插件库——tippyjs
yuxingwu9872的博客
05-01 305
Tippyjs轻量的纯 JavaScript 动态提示工具插件库。它提供了大量的不同悬停效果和超过 20 个可定制的选项。包括工具提示、弹出框、下拉菜单和菜单库。
科普下Tippy.js - 开源且高度可做空间php的气泡翻译器
01-19 883
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、付费专栏及课程。

余额充值