css倒三角形提示框 |htmlcss3手册下载

/* 首先，大家定义一个样式为 .tooltip 的类 */
.tooltip {
position: relative;
display: inline-block; /* 提示框内的内容应在同一行 */
border-bottom: 1px dotted black; /* 描边 */
}
/* 接着，在 .tooltip 类中，大家定义一个元素为 .tooltiptext 的类 */
.tooltip .tooltiptext {
visibility: hidden; /* 元素默认是隐藏 */
width: 120px; /* 视情况而定 */
background-color: #555; /* 提示框颜色 */
color: #fff; /* 提示文字颜色 */
text-align: center; /* 居中文字 */
padding: 10px; /* 提示框内边距 */
border-radius: 6px; /* 切圆角 */
position: absolute; /* 绝对定位 */
z-index: 1; /* 保证提示框始终在顶层显示 */
bottom: 125%; /* 将提示框放在触发元素的下方 */
left: 50%; /* 将提示框左右居中 */
margin-left: -60px; /* 向左移动一半宽度，使左右居中 */
}
/* 接下来，大家定义倒三角形的样式 */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* 将三角形放在提示框的下方 */
left: 50%; /* 左右居中 */
margin-left: -5px; /* 向左移动五像素 */
border-width: 5px; /* 三角形大小 */
border-style: solid;
border-color: #555 transparent transparent transparent; /* 设置边框颜色 */
}
/* 当鼠标悬停在触发元素上时，显示提示框 */
.tooltip:hover .tooltiptext {
visibility: visible;
}

现在，大家已经成功地创建了一个简单的CSS倒三角形提示框。当您的用户将鼠标悬停在包含 .tooltip 类的元素上时，提示框将自动弹出并向下展开。您可以通过自定义 .tooltip 和 .tooltiptext 类的样式属性来进一步改变提示框的显示效果。