快速提示：工具提示，由HTML5数据属性提供

最新推荐文章于 2025-04-27 14:49:16 发布

翻译最新推荐文章于 2025-04-27 14:49:16 发布 · 276 阅读

文章标签：

#java #python #css #html #vue #ViewUI

本文介绍如何使用HTML5数据属性和CSS创建工具提示。通过两种方法，一种是在HTML中添加额外的标记，另一种是使用HTML5数据属性，可以轻松地为网站元素添加悬停提示。

只需在HTML中添加一些标记并使用CSS，即可轻松实现工具提示。但是，如果您从未听说过HTML5数据属性，则可能需要查看这种替代方法（而且更加简洁）。

观看截屏

如果您一直在关注管理栏系列，那么此截屏视频应该可以很好地完成工作。如果您没有一直关注，请不要担心。该截屏视频将教您一些可以在各种情况下使用的信息。我们将研究几个选项来启动和运行我们的工具提示。

如果出于某种疯狂的原因，您不想看我演示这些内容，请参考以下几段摘录并进行练习。注意：这些是简化的示例-您可能要添加浏览器前缀和其他样式等。

工具提示片段：添加了标记

第一个示例在锚点中使用<span>形式的其他标记。它工作得很好，允许我们在工具提示中添加装饰性的“点”，并且在当前与浏览器兼容性有关的情况下，它是更安全的选择。

HTML：

<a href="#" class="tooltip">This is the link<span>this is the tip!</span></a>

CSS：

a.tooltip span {
	font-size: 10px;
	position:absolute;
	z-index: 999;
	white-space:nowrap;
	bottom:9999px;
	left: 50%;
	background:#000;
	color:#e0e0e0;
	padding:0px 7px;
	line-height: 24px;
	height: 24px;
	
	opacity: 0;	
	transition:opacity 0.4s ease-out; 
	}		
	
a.tooltip span::before {
	content: "";
	display: block;
	border-left: 6px solid #000000;
	border-top: 6px solid transparent;
	position: absolute;
	top: -6px;
	left: 0px;
	}
	
a.tooltip:hover span {
	opacity: 1;
	bottom:-35px;
	}

工具提示片段： HTML5数据属性

这是清理标记，使用HTML5 data-attribute保存工具提示的值以及使用css ::before伪元素显示它的示例。更整洁。

HTML：

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

CSS：

a.tooltip::before {
	content: attr(data-tip) ;	
	
	font-size: 10px;
	position:absolute;
	z-index: 999;
	white-space:nowrap;
	bottom:9999px;
	left: 50%;
	background:#000;
	color:#e0e0e0;
	padding:0px 7px;
	line-height: 24px;
	height: 24px;
	
	opacity: 0;  
   	transition:opacity 0.4s ease-out; 
	}
	
a.tooltip:hover::before	{
	opacity: 1;
	bottom:-35px;
	}

有用的资源

John Resig关于HTML5数据属性
W3.org关于HTML5数据属性的参考
丹·伊登（Dan Eden）使用HTML5数据属性进行导航
Chris Coyier讨论CSS生成内容的过渡

翻译自: https://webdesign.tutsplus.com/articles/quick-tip-tooltips-courtesy-of-html5-data-attributes--webdesign-4826