【CSS】手写 Tooltip 提示组件

文章目录

效果示例

代码实现

html 复制代码
<!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>
  • 效果展示:
相关推荐
Codigger官方几秒前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
90后的晨仔2 分钟前
🌟 Vue3 + Element Plus 表格开发实战:从数据映射到 UI 优化的五大技巧
前端
ObjectX前端实验室1 小时前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
天桥下的卖艺者1 小时前
R语言基于shiny开发随机森林预测模型交互式 Web 应用程序(应用程序)
前端·随机森林·r语言·shiny
技术钱1 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
路很长OoO1 小时前
Flutter 插件开发实战:桥接原生 SDK
前端·flutter·harmonyos
开水好喝2 小时前
Code Coverage Part I
前端
DoraBigHead2 小时前
🧭 React 理念:让时间屈服于 UI —— 从同步到可中断的演化之路
前端·javascript·面试
敢敢J的憨憨L2 小时前
GPTL(General Purpose Timing Library)使用教程
java·服务器·前端·c++·轻量级计时工具库
喝拿铁写前端3 小时前
Vue 组件通信的两种世界观:`.sync` 与普通 `props` 到底有什么不同?
前端·vue.js·前端框架