使用CSS content的attr实现鼠标悬浮提示（tooltip）效

为何实现这种独特的效果呢？其实，这种效果是基于title的提示说明进行创意衍生的。在网页设计中，原生的提示效果可能显得简陋，因此有许多插件库如jquery-ui的tooltip、Bootstrap的tooltips等可供选择。有时我们仅需在特定位置添加简单提示，无需引入庞大的插件库。这时，我们可以利用CSS的content属性结合:before和:after伪元素来轻松实现这一需求。

让我们来看看实现后的效果。在一个网页中，有一个链接：w3cbest。这里的“data-”是自定义属性，我们可以通过它来自定义提示内容。配合CSS中的:before和:after伪元素以及content属性的使用，我们可以调用data-tooltip中的自定义提示内容。

接下来是CSS代码的实现：

```css

.dui-tips {

position: relative;

display: inline-block;

cursor: pointer;

}

.dui-tips[data-tooltip]:after, .dui-tips[data-tooltip]:before {

visibility: hidden; / 默认隐藏提示内容 /

position: absolute; / 绝对定位 /

top: 50%; / 垂直居中 /

left: 100%; / 水平右对齐 /

transition: all .3s; / 平滑过渡效果 /

}

.dui-tips[data-tooltip]:after {

content: attr(data-tooltip); / 显示自定义提示内容 /

transform: translate(-5px, -50%); / 调整位置 /

white-space: pre; / 保持文本格式 /

padding: 5px 10px; / 内边距 /

background-color: rgba(0, 0, 0, 0); / 背景颜色透明 /

color: rgba(255, 255, 255, 0); / 文字颜色透明 /

}

.dui-tips[data-tooltip]:before { / 用于创建提示箭头 /

content: ''; / 不显示内容 /

height: 0; / 高度为0 /

width: 0; / 宽度为0 /

transform: translate(-10px, -50%); / 调整位置 /

border-width: 5px 5px 5px 0; / 创建箭头边框样式 /

border-style: solid; / 实线边框样式 /

border-color: transparent rgba(0, 0, 0, 0) transparent transparent; / 设置边框颜色透明渐变效果 /

}

```

当鼠标悬停在带有class为"dui-tips"的元素上时，提示内容和箭头将显示出来，并带有渐变效果。这种实现方式既简单又实用，适用于需要简单提示的场景。无需引入额外的插件库，只需利用CSS的现有功能即可实现。希望这篇文章能为大家的学习带来帮助，也请大家多多支持狼蚁SEO。也欢迎大家在评论区留言交流，共同学习进步。