CSS 小技巧 —— CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层
1. 两个元素实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯 CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.item {
position: relative;
display: inline-block;
margin: 10px;
}
.name {
cursor: pointer;
padding: 5px;
}
.desc {
display: none;
position: absolute;
top: 130%;
left: 50%;
transform: translateX(-50%) translateY(-10px);
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
z-index: 100;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.desc::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
}
.item:hover .desc {
display: block;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
</style>
</head>
<body>
<ul class="item-list">
<li class="item">
<span class="name">a</span>
<span class="desc">aa</span>
</li>
<li class="item">
<span class="name">b</span>
<span class="desc">bb</span>
</li>
<li class="item">
<span class="name">c</span>
<span class="desc">ccdddd</span>
</li>
</ul>
</body>
</html>
2. 通过 ::after 和 ::before 实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯 CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.item-list {
display: flex;
gap: 20px;
}
.item {
position: relative;
}
.name {
position: relative;
cursor: pointer;
padding: 5px;
}
.name::after {
content: attr(data-desc);
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(5px);
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
z-index: 100;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.name:hover::after {
display: block;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.name::before {
content: '';
display: none;
position: absolute;
top: calc(100% - 5px);
left: 50%;
transform: translateX(-50%) translateY(-5px);
border-width: 5px;
border-style: solid;
border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
}
.name:hover::before {
display: block;
}
</style>
</head>
<body>
<ul class="item-list">
<li class="item">
<span class="name" data-desc="aa">a</span>
</li>
<li class="item">
<span class="name" data-desc="bb">b</span>
</li>
<li class="item">
<span class="name" data-desc="ccddddd">c</span>
</li>
</ul>
</body>
</html>
3. 实现 Tooltip 上下左右四个位置展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯 CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层</title>
<style>
.tooltip-container {
position: relative;
display: inline-block;
margin: 100px;
border-bottom: 1px dotted black;
cursor: pointer;
}
.tooltip-container::after {
content: attr(data-tooltip);
position: absolute;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
}
.tooltip-container::before {
content: '';
position: absolute;
z-index: 1;
border: 5px solid transparent;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
}
.tooltip-container:hover::after,
.tooltip-container:hover::before {
opacity: 1;
visibility: visible;
}
.tooltip-top::after {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 10px;
}
.tooltip-top::before {
bottom: calc(100% - 5px);
left: 50%;
transform: translateX(-50%);
margin-bottom: 5px;
border-top-color: #333;
}
.tooltip-bottom::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 10px;
}
.tooltip-bottom::before {
top: calc(100% - 5px);
left: 50%;
transform: translateX(-50%);
margin-top: 5px;
border-bottom-color: #333;
}
.tooltip-right::after {
top: 50%;
left: 100%;
transform: translateY(-50%);
margin-left: 10px;
}
.tooltip-right::before {
top: 50%;
left: calc(100% - 5px);
transform: translateY(-50%);
margin-left: 5px;
border-right-color: #333;
}
.tooltip-left::after {
top: 50%;
right: 100%;
transform: translateY(-50%);
margin-right: 10px;
}
.tooltip-left::before {
top: 50%;
right: calc(100% - 5px);
transform: translateY(-50%);
margin-right: 5px;
border-left-color: #333;
}
</style>
</head>
<body>
<div class="tooltip-container tooltip-top" data-tooltip="Top Tooltip">
顶部显示
</div>
<div class="tooltip-container tooltip-bottom" data-tooltip="Bottom Tooltip">
下方显示
</div>
<div class="tooltip-container tooltip-left" data-tooltip="Left Tooltip">
左侧显示
</div>
<div class="tooltip-container tooltip-right" data-tooltip="Right Tooltip">
右侧显示
</div>
</body>
</html>
