【CSS】手写 Tooltip 提示组件
文章目录
- 效果示例
- 代码实现
效果示例
代码实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>一颗不甘坠落的流星</title><style>body {padding: 120px;}.tooltip {position: relative;display: inline-block;/* 如果需要在可悬停文本下面显示点线 */border-bottom: 1px dotted black;/* 悬浮小手 */cursor: pointer;}/* Tooltip 文本 */.tooltip .tooltiptext {visibility: hidden;background-color: black;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;opacity: 0.8;}/* 创建Tooltip 箭头 */.tooltip .tooltiptext::after {content: "";position: absolute;border-width: 5px;border-style: solid;}/* 将鼠标悬停在工具提示容器上时，显示工具提示文本 */.tooltip:hover .tooltiptext {visibility: visible;}/* 上悬浮样式 */#top .tooltiptext {width: 120px;bottom: 100%;left: 50%;/* -width/2 : -(120/2 = 60)*/margin-left: -60px;}#top .tooltiptext::after {top: 100%;left: 50%;margin-left: -5px;border-color: black transparent transparent transparent;}/* 下悬浮样式 */#bottom .tooltiptext {width: 120px;top: 100%;left: 50%;/* -width/2 : -(120/2 = 60)*/margin-left: -60px;}#bottom .tooltiptext::after {bottom: 100%;left: 50%;margin-left: -5px;border-color: transparent transparent black transparent;}/* 左悬浮样式 */#left .tooltiptext {width: 120px;top: -5px;right: 105%;}#left .tooltiptext::after {top: 50%;left: 100%;margin-top: -5px;border-color: transparent transparent transparent black;}/* 右悬浮样式 */#right .tooltiptext {width: 120px;top: -5px;left: 105%;}#right .tooltiptext::after {top: 50%;right: 100%;margin-top: -5px;border-color: transparent black transparent transparent;}</style><body><div class="tooltip" id="top"><span>上悬浮展示</span><span class="tooltiptext">Tooltip text</span></div><div class="tooltip" id="bottom"><span>下悬浮展示</span><span class="tooltiptext">Tooltip text</span></div><div class="tooltip" id="left"><span>左悬浮展示</span><span class="tooltiptext">Tooltip text</span></div><div class="tooltip" id="right"><span>右悬浮展示</span><span class="tooltiptext">Tooltip text</span></div></body><script type="text/javascript"></script>
</html>
- 效果展示：
相关文章：
【CSS】手写 Tooltip 提示组件
文章目录 效果示例代码实现 效果示例 代码实现 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>一颗不甘坠落的流星</title><style>body {padding: 120px;}.tooltip {position: relative;display: inline-blo…...
MySQL DDL语法
MySQL DDL语法 DDL简介 MySQL DDL（Data Definition Language）是用于定义和管理数据库结构的语言。它包括创建、修改和删除数据库、表、视图、索引和其他数据库对象的语句。DDL语法的重要性如下： 数据库结构定义：DDL语句用于创建…...
Git 绑定账号 和clone
一:环境: 下载安装完成Git,在桌面或文件夹下(在你将要保存代码的位置)右击可以看到Git Bash Here,点击可以进入黑窗口 二:配置公钥 1.查看当前状态(如果已绑定,且知道密码可以登陆,可以直接获取SSH公钥并配置即可拉取代码) git config --list 2.配置全局git用户名和邮箱 …...
ftp和sftp区别，以及xftp的使用
网上找链接找的很辛苦对吧！ 网上下载的破解版还不用。而且用没多久又说要更新了，又得重新找。 这下直接把官方免费获取链接发给你，就不用在被这种事情麻烦了。 家庭/学校免费 - NetSarang Website (xshell.com):家庭/学校免费 - NetSarang W…...
C++ 编程入门（一）—— Hello World
C 是什么环境搭建第一个 C 程序本篇结语 C 是什么 C 是一种面向对象的计算机程序设计语言，由美国 AT&T 贝尔实验室的 Bjarne Stroustrup 在 20 世纪 80 年代初期发明并实现（最初这种语言被称作 “C with Classes” 带类的 C 语言）。它是一…...
openlayers系列：加载arcgis和geoserver在线离线切片
https://www.freesion.com/article/1751396517/ 1.背景 有个项目需要使用openlayer加载各种服务上发布的数据，坐标系也不同，我们都知道openalyer默认可以加载EPAG:3857,要加载4490的坐标系的数据需要重新定义一下，之后再加载。一想起要重新…...
《人工智能安全》课程总体结构
1 课程内容 人工智能安全观：人工智能安全问题、安全属性、技术体系等基本问题进行了归纳整理。人工智能安全的主要数据处理方法，即非平衡数据分类、噪声数据处理和小样本学习。人工智能技术赋能网络空间安全攻击与防御：三个典型实例及攻击图…...
unity关于匀速移动某些值的方法
可能很多人会用到Verctor3.Lerp、Mathf.LerpUnclamped等等 这种其实不是匀速 看一下这个整体差不多的逻辑 public static float Lerp(float a, float b, float t){return a (b - a) * t;};这个逻辑就是，从a值到b值，返回一个a值加（b值-a值&…...
解决VScode下载太慢的问题记录
最近突然想重新下载vscoded便携免安装版，发现下载很慢，于是乎查询一下，以便记录 下载地址 VScode官方网站： https://code.visualstudio.com/ 根据个人的需求选择下载，页面加载下载需要等一会， 然后就会…...
Gitlab服务器备份恢复及系统升级
居安思危，思则有备，有备无患。 基于此，申请了一个测试服务器，准备先安装同版本服务器，按照最新的数据进行恢复，然后再将现在的服务器升级到Gitlab的最新版本，记录一下完整的过程，以…...
docker入门讲解
目录 第 1 章 Docker核心概念与安装 为什么使用容器？ Docker是什么 Docker设计目标 Docker基本组成 容器 vs 虚拟机 Docker应用场景 Linux 安装 Docker 第 2 章 Docker镜像管理 镜像是什么 镜像从哪里来？ 镜像与容器联系 镜像常用管理命令 镜像存储核心技术：联…...
)
【Matlab】基于卷积神经网络的数据回归预测（Excel可直接替换数据）)
【Matlab】基于卷积神经网络的数据回归预测（Excel可直接替换数据） 1.模型原理2.数学公式3.文件结构4.Excel数据5.分块代码6.完整代码7.运行结果1.模型原理 基于卷积神经网络（Convolutional Neural Network，CNN）的数据回归预测是一种常见的机器学习方法，适用于处理具有空…...
在Springboot集成Activiti工作流引擎-引入、调用，测试【基础讲解】
工作流 通过计算机对业务流程自动化执行管理 他主要解决的是使在多个参与者之间按照某种“预定义规则”自动进行传递稳定 信息或任务的过程 通俗来讲 业务上一个玩着的审批流程 比如请假，出差 外出采购等 工作流引擎就是来解决流程问题的 提高我们的工作效率 如果…...
Java书签 #解锁MyBatis的4种批量插入方式及ID返回姿势
1. 今日书签 项目开发中，我们经常会用到单条插入和批量插入。但是实际情况可能是，项目初期由于种种原因，在业务各处直接使用单条插入SQL进行开发（未开启批处理），在后面的迭代中，系统性能问题渐…...
在react项目中如何引入国际化
react-i18next 在 React 项目中引入国际化（Internationalization，简称 i18n）可以使用第三方库来实现。其中，最常用且流行的国际化库是 react-i18next，它基于 i18next 实现，提供了方便易用的国际化功能。下…...
spring学习笔记十三
注解实现管理第三方Bean和为第三方Bean注入资源 1、添加pom坐标 <dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.1.16</version></dependency> 2、SpringConfig配置类 Configuratio…...
react native 本地存储 AsyncStorage
An asynchronous, unencrypted, persistent, key-value storage system for React Native. Async Storage 只能用来储存字符串数据，所以为了去储存object类型的数据，得先进行序列化（JSON.stringify()）当你想要使用数据的时候&…...
Postgresql数据库中的时间类型汇总
PostgreSQL数据库有以下几种时间类型 1 日期 date：表示日期，格式为YYYY-MM-DD。 2 时间 time：表示时间，格式为HH:MI:SS。 3 日期和时间 timestamp：表示日期和时间，格式为YYYY-MM-DD HH:MI:SS。 4 带…...
算法刷题Day 51 最佳买卖股票时机含冷冻期+买卖股票的最佳时期含手续费
Day 51 动态规划 309. 最佳买卖股票时机含冷冻期 关键是要画出状态转移图 然后根据状态转移图来写状态转移方程 class Solution { public:int maxProfit(vector<int>& prices) {int len prices.size();vector<vector<int>> dp(len, vector<int&g…...
编程导航算法村 第五关 | 白银挑战
编程导航算法村 第五关 | 白银挑战 用栈实现队列 LeetCode 232题 class MyQueue {private Stack<Integer> stack; // 保存private Stack<Integer> tempstack; // 临沭队列public MyQueue() {stack new Stack<>();tempstack new Stack<>();}public…...
三十岁想从零转行现实吗？带你分辨真正有前景的好工作
我是29岁那年，完成从转行裸辞副业的职业转型。 如果你把职业生涯看成是从现在开始30岁，到你退休那年，中间这么漫长的30年，那么30岁转行完全来得及…...
警惕！AI正在悄悄重构全球攻防格局
警惕！AI 正在悄悄重构全球攻防格局 热点聚焦 AI重构网络安全：全球巨头加速布局 2026年5月，全球网络安全领域迎来重大变革，AI技术正在重塑攻防格局。OpenAI发布专为网络安全防御打造的集成化AI平台Daybreak，将安全防…...
自制极低频电流探头：负电阻补偿原理与低频方波测量实践
1. 项目概述：为极低频电流测量而生在电子测试领域，电流探头是个再常见不过的工具，无论是排查开关电源的纹波，还是分析电机驱动的波形，都离不开它。但如果你尝试用市面上常见的电流探头去观察一个频率低至几赫兹&#x…...
【DeepSeek架构评审功能深度解密】：20年架构师亲授3大避坑指南与5步落地 checklist
更多请点击： https://kaifayun.com 第一章：DeepSeek架构评审功能全景概览 DeepSeek架构评审功能是一套面向大模型系统设计与工程落地的自动化分析框架，聚焦于模型结构合理性、计算图优化潜力、内存访问模式、算子兼容性及部署约束等多维度评…...
Unity事件系统实战：用事件驱动重构你的金币拾取逻辑（告别硬编码）
Unity事件系统实战：用事件驱动重构你的金币拾取逻辑（告别硬编码）在游戏开发中，我们经常会遇到这样的场景：玩家拾取金币后，需要更新UI、播放音效、解锁成就、保存数据……如果把这些逻辑全部写在金币拾取的代…...
终极Node.js Mock工具：Mockery入门到精通实战教程
终极Node.js Mock工具：Mockery入门到精通实战教程 【免费下载链接】mockery Simplifying the use of mocks with Node.js 项目地址: https://gitcode.com/gh_mirrors/mock/mockery Mockery是Node.js生态中简化Mock使用的终极工具，它为开发者提供了…...
--脚本介绍)
二十六.签名与脚本(1)--脚本介绍
1.区块链脚本介绍在之前的章节中，我们了解了签名与验证相关，但是btc的交易数据，签名和验证，不是单纯的，还有脚本深度参与其中。我们从开始来：bool SendMoney(CScript scriptPubKey, int64 nValue, CWalletT…...
2026这6款神级降AIGC平台大公开，一键让AIGC率直逼绝对安全线！
步入 2026 年，学术圈的风向早已不是从前的模样。曾经大家还在为查重率发愁，如今却陷入了更棘手的困境——如何在不破坏论文专业性的前提下，彻底消除 AI 痕迹？随着 AIGC 检测技术不断进化，高校对论文的审核标准也愈发严…...
输电线路在线监测系统｜架空线路安全运行的“第一道防线“！
输电线路微气象监测站是专为高压输电线路、电网廊道、杆塔运维量身打造的专利级一体化微气象智能监测设备。依托双专利超声波探测技术、六要素集成传感架构、无启动风速高精测量、智能抗干扰稳控系统，实现输电线路沿线气象24小时全自动捕捉、动态实时监测、大风风险…...
使用libusb-win32驱动复活老旧USB硬件：以Elektor Magic Eye为例
1. 项目概述：让老硬件在新时代焕发新生手头有一台十多年前的《Elektor》杂志上刊登的“Magic Eye EM84”复古VFD显示屏项目，想把它接到Windows 10电脑上当个酷炫的CPU占用率显示器，却发现官方提供的“AVR309”USB驱动在新系统上彻底罢工了。这…...