当前位置：首页 > news >正文

【CSS】手写 Tooltip 提示组件

news 2025/9/14 16:58:40

文章目录

- 效果示例
- 代码实现

效果示例

在这里插入图片描述

代码实现

<!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…...

编程日记 2023/7/28 1:46:02

MySQL DDL语法

MySQL DDL语法 DDL简介 MySQL DDL（Data Definition Language）是用于定义和管理数据库结构的语言。它包括创建、修改和删除数据库、表、视图、索引和其他数据库对象的语句。DDL语法的重要性如下： 数据库结构定义：DDL语句用于创建…...

编程日记 2023/7/28 1:45:02

Git 绑定账号和clone

一:环境: 下载安装完成Git,在桌面或文件夹下(在你将要保存代码的位置)右击可以看到Git Bash Here,点击可以进入黑窗口二:配置公钥 1.查看当前状态(如果已绑定,且知道密码可以登陆,可以直接获取SSH公钥并配置即可拉取代码) git config --list 2.配置全局git用户名和邮箱 …...

编程日记 2023/7/28 1:43:59

ftp和sftp区别，以及xftp的使用

网上找链接找的很辛苦对吧！ 网上下载的破解版还不用。而且用没多久又说要更新了，又得重新找。这下直接把官方免费获取链接发给你，就不用在被这种事情麻烦了。家庭/学校免费 - NetSarang Website (xshell.com):家庭/学校免费 - NetSarang W…...

编程日记 2023/7/28 1:42:57

C++ 编程入门（一）—— Hello World

C 是什么环境搭建第一个 C 程序本篇结语 C 是什么 C 是一种面向对象的计算机程序设计语言，由美国 AT&T 贝尔实验室的 Bjarne Stroustrup 在 20 世纪 80 年代初期发明并实现（最初这种语言被称作 “C with Classes” 带类的 C 语言）。它是一…...

编程日记 2023/7/28 1:41:56

openlayers系列：加载arcgis和geoserver在线离线切片

https://www.freesion.com/article/1751396517/ 1.背景有个项目需要使用openlayer加载各种服务上发布的数据，坐标系也不同，我们都知道openalyer默认可以加载EPAG:3857,要加载4490的坐标系的数据需要重新定义一下，之后再加载。一想起要重新…...

编程日记 2023/7/28 1:40:54

《人工智能安全》课程总体结构

1 课程内容人工智能安全观：人工智能安全问题、安全属性、技术体系等基本问题进行了归纳整理。人工智能安全的主要数据处理方法，即非平衡数据分类、噪声数据处理和小样本学习。人工智能技术赋能网络空间安全攻击与防御：三个典型实例及攻击图…...

编程日记 2023/7/28 1:39:53

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值&…...

编程日记 2023/7/28 1:38:52

解决VScode下载太慢的问题记录

最近突然想重新下载vscoded便携免安装版，发现下载很慢，于是乎查询一下，以便记录下载地址 VScode官方网站： https://code.visualstudio.com/ 根据个人的需求选择下载，页面加载下载需要等一会， 然后就会…...

编程日记 2023/7/28 1:37:52

Gitlab服务器备份恢复及系统升级

居安思危，思则有备，有备无患。基于此，申请了一个测试服务器，准备先安装同版本服务器，按照最新的数据进行恢复，然后再将现在的服务器升级到Gitlab的最新版本，记录一下完整的过程，以…...

编程日记 2023/7/28 1:36:51

docker入门讲解

目录第 1 章 Docker核心概念与安装为什么使用容器？ Docker是什么 Docker设计目标 Docker基本组成容器 vs 虚拟机 Docker应用场景 Linux 安装 Docker 第 2 章 Docker镜像管理镜像是什么镜像从哪里来？镜像与容器联系镜像常用管理命令镜像存储核心技术：联…...

编程日记 2023/7/28 1:35:50

【Matlab】基于卷积神经网络的数据回归预测（Excel可直接替换数据）)

【Matlab】基于卷积神经网络的数据回归预测（Excel可直接替换数据） 1.模型原理2.数学公式3.文件结构4.Excel数据5.分块代码6.完整代码7.运行结果1.模型原理基于卷积神经网络（Convolutional Neural Network，CNN）的数据回归预测是一种常见的机器学习方法，适用于处理具有空…...

编程日记 2023/7/28 1:34:48

在Springboot集成Activiti工作流引擎-引入、调用，测试【基础讲解】

工作流通过计算机对业务流程自动化执行管理他主要解决的是使在多个参与者之间按照某种“预定义规则”自动进行传递稳定信息或任务的过程通俗来讲业务上一个玩着的审批流程比如请假，出差外出采购等工作流引擎就是来解决流程问题的提高我们的工作效率如果…...

编程日记 2023/7/28 1:33:47

Java书签 #解锁MyBatis的4种批量插入方式及ID返回姿势

1. 今日书签项目开发中，我们经常会用到单条插入和批量插入。但是实际情况可能是，项目初期由于种种原因，在业务各处直接使用单条插入SQL进行开发（未开启批处理），在后面的迭代中，系统性能问题渐…...

编程日记 2023/7/28 1:32:46

在react项目中如何引入国际化

react-i18next 在 React 项目中引入国际化（Internationalization，简称 i18n）可以使用第三方库来实现。其中，最常用且流行的国际化库是 react-i18next，它基于 i18next 实现，提供了方便易用的国际化功能。下…...

编程日记 2023/7/28 1:31:45

spring学习笔记十三

注解实现管理第三方Bean和为第三方Bean注入资源 1、添加pom坐标 <dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.1.16</version></dependency> 2、SpringConfig配置类 Configuratio…...

编程日记 2023/7/28 1:30:44

react native 本地存储 AsyncStorage

An asynchronous, unencrypted, persistent, key-value storage system for React Native. Async Storage 只能用来储存字符串数据，所以为了去储存object类型的数据，得先进行序列化（JSON.stringify()）当你想要使用数据的时候&…...

编程日记 2023/7/28 1:29:43

Postgresql数据库中的时间类型汇总

PostgreSQL数据库有以下几种时间类型 1 日期 date：表示日期，格式为YYYY-MM-DD。 2 时间 time：表示时间，格式为HH:MI:SS。 3 日期和时间 timestamp：表示日期和时间，格式为YYYY-MM-DD HH:MI:SS。 4 带…...

编程日记 2023/7/28 1:28:42

算法刷题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…...

编程日记 2023/7/28 1:27:41

编程导航算法村第五关 | 白银挑战用栈实现队列 LeetCode 232题 class MyQueue {private Stack<Integer> stack; // 保存private Stack<Integer> tempstack; // 临沭队列public MyQueue() {stack new Stack<>();tempstack new Stack<>();}public…...

编程日记 2023/7/28 1:26:40

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑一、学生端在主界面可以选择自己的用户角色选择学生则进入学生登录界面…...

编程新知 2025/9/7 3:46:41

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性：电力载波技术在楼宇自控中的核心价值在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...

编程新知 2025/8/11 11:25:20

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2025/9/11 12:54:40

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/8/2 6:48:59

五年级数学知识边界总结思考-下册

目录一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...

编程新知 2025/6/20 13:47:44

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求，由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面： 🏛️ 一、组织架构与职责质量体系明确组织内各部门、岗位的职责与权限，形成层级清晰的管理网络&#xf…...

编程新知 2025/8/3 5:51:09

ardupilot 开发环境eclipse 中import 缺少C++

目录文章目录目录摘要1.修复过程摘要本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/9/1 22:19:02