前端简单的实现鼠标悬浮展示其他数据

简介：

简单的实现鼠标悬浮展示其他数据

效果：

代码：

html部分

<p>鼠标悬浮tip 实现p>
<div data-title="鼠标悬浮展示的内容xxxx" class="test">测试div>

css部分

.test{
  position: relative;
  cursor: pointer;
}
.test::after {
    content: attr(data-title); /* 获取自定义属性值作为内容 */
    display: none; /* 默认不显示 */
    position: absolute; /* 设置绝对定位 */
    top: -35px; /* 调整提示框在Y轴上的位置 */
    left: 10px; /* 水平居中 */
    background:#303133;
    white-space: nowrap; /* 防止换行 */
    z-index: 9999; /* 确保提示框处于最前面 */
	color:#fff;
	border-radius:4px;
	padding:4px 8px;
	font-size:14px
}
.test:hover::after {
  display: block; /* 当鼠标悬浮时显示提示框 */
}