自定义CSS Tooltip优化：移除多余边框并修复背景问题

针对你遇到的tooltip多余边框、背景效果不符合预期的问题，结合背景为图片无法使用background:inherit的情况，下面是修改后的代码及关键调整说明：

修改后的完整代码 #

.wrapper {
  width:400px;
  height:400px;
  background:url('https://i.imgur.com/ZzNCjw4.jpg');
  background-size: cover; /* 让背景图铺满容器，优化模糊效果展示 */
}

.tooltip-info {
  position:relative;
  top:100px;
  left:200px;
}

.tooltip-info .tooltip-text {
  width:150px;
  position:absolute;
  color:white;
  text-align:center;
  padding:5px;
  border-radius:8px;
  font-size:14px;
  font-weight:500;
  visibility:hidden;
  opacity: 0; /* 配合过渡实现平滑淡入 */
  transition: all 0.2s ease; /* 统一过渡效果 */
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  border:1px solid white;
  background-color: rgba(0, 0, 0, 0.2); /* 半透明背景增强模糊层次感 */
}

.tooltip-info .tooltip-text::after {
  content: '';
  width:10px;
  height:10px;
  background-color: rgba(0, 0, 0, 0.2); /* 与tooltip主体背景保持一致 */
  border-width: 1px;
  border-style: solid;
  border-color: transparent white white transparent;
  position: absolute;
  top: 100%; /* 让箭头刚好贴合tooltip底部 */
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg); /* 调整偏移避免边框重叠 */
}

.tooltip-info .tooltip-text a {
  text-decoration:underline;
  color:yellow;
}

.tooltip-info:hover .tooltip-text {
  visibility:visible;
  opacity: 1; /* 显示时恢复透明度 */
  transform:translateY(-55px) translateX(-75px);
}

.tooltip-info .icon {
  color:white !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"  type='text/css'>

<div class="wrapper">
  <div class="tooltip-info">
    <div class="tooltip-text">For more information <br> <a href="google.com">click here</a></div>
    <i class="icon fa fa-info-circle"></i>
  </div>
</div>

关键调整说明 #

• 消除多余边框：将箭头的top值改为100%，调整transform偏移为translate(-50%, -50%)，让箭头顶部与tooltip底部边框无缝衔接，避免重叠线条；移除箭头的backdrop-filter，改用与主体一致的半透明背景，解决模糊效果不一致问题。
• 优化背景模糊：给tooltip-text添加半透明背景色，配合backdrop-filter让模糊效果更自然，避免纯模糊在部分场景下的显示异常；给wrapper添加background-size: cover，确保背景图铺满容器，让tooltip模糊效果更直观。
• 提升交互体验：新增opacity属性和统一过渡规则，替代单纯依赖visibility的显示逻辑，让tooltip的显示/隐藏更平滑。

内容的提问来源于stack exchange，提问作者Hector