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>
