自定义悬浮气泡组件

一.常用悬浮气泡展示
在一个项目中,常常会使用点悬浮展示,而市面上悬浮tooltip的组件非常多
例如常用的antd提供的Tooltip
在这里插入图片描述

用法如下(来自于官方文档示例):

import React from 'react';
import { Button, Tooltip, ConfigProvider } from 'antd';
const text = <span>prompt text</span>;
const buttonWidth = 80;
const App = () => (<ConfigProviderbutton={{style: {width: buttonWidth,margin: 4,},}}><div className="demo"><divstyle={{marginInlineStart: buttonWidth,whiteSpace: 'nowrap',}}><Tooltip placement="topLeft" title={text}><Button>TL</Button></Tooltip><Tooltip placement="top" title={text}><Button>Top</Button></Tooltip><Tooltip placement="topRight" title={text}><Button>TR</Button></Tooltip></div><divstyle={{width: buttonWidth,float: 'inline-start',}}><Tooltip placement="leftTop" title={text}><Button>LT</Button></Tooltip><Tooltip placement="left" title={text}><Button>Left</Button></Tooltip><Tooltip placement="leftBottom" title={text}><Button>LB</Button></Tooltip></div><divstyle={{width: buttonWidth,marginInlineStart: buttonWidth * 4 + 24,}}><Tooltip placement="rightTop" title={text}><Button>RT</Button></Tooltip><Tooltip placement="right" title={text}><Button>Right</Button></Tooltip><Tooltip placement="rightBottom" title={text}><Button>RB</Button></Tooltip></div><divstyle={{marginInlineStart: buttonWidth,clear: 'both',whiteSpace: 'nowrap',}}><Tooltip placement="bottomLeft" title={text}><Button>BL</Button></Tooltip><Tooltip placement="bottom" title={text}><Button>Bottom</Button></Tooltip><Tooltip placement="bottomRight" title={text}><Button>BR</Button></Tooltip></div></div></ConfigProvider>
);
export default App;

该组件提供的api属性可进入官方文档查看
二.自定义悬浮气泡组件
如上所说,虽然市面上大部分的气泡提示组件都已经十分完善,但是在工作中,我们有时可能会遇到一些问题,比如页面样式冲突,或者项目体量大导致浮显卡顿,鼠标事件冲突等等情况导致无法使用组件库提供的组件,这个时候我们就需要自己去封装一个
优点:
1.代码体量小,性能好
2.样式可根据个人所需定制
3.不会出现样式冲突问题
4.可维护性强
思路:
气泡显示文字只需要使用鼠标移入移出事件配合css样式即可完成

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>.containerbut {width: 50px;height: 20px;position: relative;top: 200px;left: 50%;text-align: center;}.hover-div {display: none;width: 400px;height: 30px;line-height: 30px;background-color: rgb(184, 184, 184);border-radius: 10px;position: absolute;top: -40px;left: calc((-400px + 50px) / 2); /* left 要计算,子元素的宽度 减去 父元素宽度 除以2 */}.triangle {width: 0;height: 0;border-top: 10px solid rgb(184, 184, 184);border-right: 10px solid transparent;border-left: 10px solid transparent;border-bottom: 10px solid transparent;position: absolute;top: 30px;left: 50%;transform: translateX(-50%);}.containerbut:hover .hover-div {display: block;}.test {width: 50px;height: 20px;position: relative;top: 100px;left: 50%;text-align: center;}.test:hover .hover-div {display: block;}</style><body><div class="containerbut">123<div class="hover-div">This is the popup div.<div class="triangle"></div></div></div><div class="test">test<div class="hover-div">This is the popup div.<div class="triangle"></div></div></div></body>
</html>

运行结果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/263765.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FariyGUI × Cocos Creator 3.x 弹窗制作

在fgui里制作一个弹窗 新建一个按钮&#xff0c;作为返回按钮 新建一个标签 做成这个样子 其中包含两个节点&#xff0c;名称分别为title和closeButton 可以阅读fgui的源码window.js得到&#xff0c;closeButton按钮只需要输入名称即可在contentPane设置时自动绑定。 且会…

计算机网络-网络互联与互联网(一)

1.常用网络互联设备&#xff1a; 1层物理层&#xff1a;中继器、集线器2层链路层&#xff1a;网桥、交换机3层网络层&#xff1a;路由器、三层交换机4层以上高层&#xff1a;网关 2.网络互联设备&#xff1a; 中继器Repeater、集线器Hub&#xff08;又叫多端口中继器&#xf…

Git笔记——4

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 一、操作标签 二、推送标签 三、多人协作一 完成准备工作 协作开发 将内容合并进master 四、多人协作二 协作开发 将内容合并进master 五、解决 git branch -a…

【论文解读】transformer小目标检测综述

目录 一、简要介绍 二、研究背景 三、用于小目标检测的transformer 3.1 Object Representation 3.2 Fast Attention for High-Resolution or Multi-Scale Feature Maps 3.3 Fully Transformer-Based Detectors 3.4 Architecture and Block Modifications 3.6 Improved …

直接写就行!EI顶刊组合:多能源微网/综合能源系统两阶段鲁棒优化配置方法代码!

适用平台&#xff1a;MatlabYalmipCplex 参考文献&#xff1a; 《考虑机组禁止运行区间的含风电鲁棒机组组合》-中国电机工程学报 《微电网两阶段鲁棒优化经济调度方法》-中国电机工程学报 程序提出了微电网中电源容量的两阶段鲁棒优化配置模型&#xff0c;第一阶段主要决策…

初识51单片机

##江科大51单片机学习 什么是单片机&#xff1f;&#xff1f;&#xff1f; 单片机&#xff0c;英文名&#xff0c;Micro Controller Unit&#xff0c;简称MCU&#xff08;tips&#xff1a;有人会简称它为CPU&#xff0c;但不是如此&#xff0c;CPU其实被集成在MCU中&#xff…

Tomcat 学习之 Servlet

目录 1 Servlet 介绍 2 创建一个 Servlet 3 web.xml 介绍&#xff08;不涉及 filter 和 listener 标签&#xff09; 3.1 display-name 3.2 welcome-file-list 3.3 servlet 3.4 session-config 3.5 error-page 3.6 context-param 4 ServletContext 5 ServletConfig …

前后端分离vue.js+nodejs学生考勤请假系统 _fbo36

此系统设计主要采用的是nodejs语言来进行开发&#xff0c;采用vue框架技术&#xff0c;框架分为三层&#xff0c;分别是控制层Controller&#xff0c;业务处理层Service&#xff0c;持久层dao&#xff0c;能够采用多层次管理开发&#xff0c;对于各个模块设计制作有一定的安全性…

解决easyExcel模板填充时转义字符\{xxx\}失效

正常我们在使用easyExcel进行模板填充时&#xff0c;定义的变量会填充好对应的实际数据&#xff0c;未定义的变量会被清空&#xff0c;但是如果这个未定义的变量其实是模板的一部分&#xff0c;那么清空了就出错了。 在这张图里&#xff0c;上面的是模板填充后导出的文件&…

探索无限维度的奥秘:Hilbert空间

当我们提到空间&#xff0c;你可能会立即想到周遭的环境——三维世界&#xff0c;其中事物可以向上或向下、左或右、前或后移动。然而&#xff0c;在数学和物理学的世界里&#xff0c;有一种抽象的空间概念&#xff0c;它不仅覆盖了我们的三维空间&#xff0c;还包括了更复杂的…

【Java程序设计】【C00313】基于Springboot的物业管理系统(有论文)

基于Springboot的物业管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的物业管理系统&#xff0c;本系统有管理员、物业、业主以及维修员四种角色权限&#xff1b; 管理员进入主页面&#xff0c;主要功能包…

MATLAB 导出可编辑的eps格式图像

任务描述&#xff1a;部分期刊要求提交可编辑的eps格式图像&#xff0c;方便美工编辑对图像进行美化 我试了直接print或者在figure窗口导出&#xff0c;发现导出的文件放到Adobe AI中并不能编辑&#xff0c;经Google找到解决办法&#xff1a; %EPS exportgraphics(gcf,myVect…

jQuery瀑布流画廊,瀑布流动态加载

jQuery瀑布流画廊&#xff0c;瀑布流动态加载 效果展示 手机布局 jQuery瀑布流动态加载 HTML代码片段 <!-- mediabanner --><div class"mediabanner"><img src"img/mediabanner.jpg" class"bg"/><div class"text&qu…

【数据结构】图——最短路径

最短路径问题&#xff1a;从在带权有向图G中的某一顶点出发&#xff0c;找出一条通往另一顶点的最短路径&#xff0c;最短也就是沿路径各边的权值总和达到最小。 最短路径分为图中单源路径和多源路径。 本文会介绍Dijkstra和Bellman-Ford解决单源路径的问题 Floyd-Warshall解…

iMazing2024Windows和Mac的iOS设备管理软件(可以替代iTunes进行数据备份和管理)

iMazing2024是一款兼容 Windows 和 Mac 的 iOS 设备管理软件&#xff0c;可以替代 iTunes 进行数据备份和管理。以下是一些 iMazing 的主要功能和优点&#xff1a; 数据备份和恢复&#xff1a;iMazing 提供了强大的数据备份和恢复功能&#xff0c;可以备份 iOS 设备上的各种数据…

基于EasyCVR视频汇聚系统的公安网视频联网共享视频云平台建设思路分析(一)

随着社会的发展和科技的进步&#xff0c;视频监控系统在各个领域的应用越来越广泛&#xff0c;视频云平台建设已经成为了行业数字化转型的重要一环。公安网视频汇聚联网共享云的建设需要充分考虑技术、架构、安全、存储、计算等多方面因素&#xff0c;以确保平台的稳定性和可用…

[面试] 什么是死锁? 如何解决死锁?

什么是死锁 死锁&#xff0c;简单来说就是两个或者多个的线程在执行的过程中&#xff0c;争夺同一个共享资源造成的相互等待的现象。如果没有外部干预线程会一直阻塞下去. 导致死锁的原因 互斥条件&#xff0c;共享资源 X 和 Y 只能被一个线程占用; 请求和保持条件&#xf…

从Unity到Three.js(outline 模型描边功能)

指定模型高亮功能&#xff0c;附带设置背景颜色&#xff0c;获取随机数方法。 百度查看说是gltf格式的模型可以携带PBR材质信息&#xff0c;如果可以这样&#xff0c;那就完全可以在blender中配置好材质导出了&#xff0c;也就不需要像在unity中调整参数了。 import * as THRE…

说一下 JVM 有哪些垃圾回收算法?

一、标记-清除算法 标记无用对象&#xff0c;然后进行清除回收。 标记-清除算法&#xff08;Mark-Sweep&#xff09;是一种常见的基础垃圾收集算法&#xff0c;它将垃圾收集分为两个阶段&#xff1a; 标记阶段&#xff1a;标记出可以回收的对象。清除阶段&#xff1a;回收被标…

9.5K Star,又一款超棒开源轻量自动化运维平台

Hi&#xff0c;骚年&#xff0c;我是大 G&#xff0c;公众号「GitHub指北」会推荐 GitHub 上有趣有用的项目&#xff0c;一分钟 get 一个优秀的开源项目&#xff0c;挖掘开源的价值&#xff0c;欢迎关注。 一个好的运维平台就变得非常重要了&#xff0c;可以节省大量的人力和物…