css 按钮的气泡提示框 |css中如何使用svg文件

HTML代码
<button class="btn">点击偶<span class="tooltip">这是一段提示文字</span></button>
CSS代码
.btn {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: relative;
}
.tooltip {
visibility: hidden;
width: 120px;
background-color: black;
color: white;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.btn:hover .tooltip {
visibility: visible;
opacity: 1;
}

在上面的代码中，大家首先定义了一个class为btn的按钮，然后在按钮内部添加了一个span元素，该元素定义了一段提示文字。CSS代码中，大家使用了visibility属性将提示框首先设为不可见，并使用position属性将提示框的位置设为相对于按钮的绝对定位，随后使用:hover属性定义了当鼠标悬停时，将提示框设为可见，并使提示框的透明度从0变为1。

通过上面的代码，大家可以轻松地为CSS按钮添加简单的气泡提示框，这对于网页设计和开发来说都是非常有用的技巧，可以为网页增添一份美观和互动的效果，提升用户的使用和体验感受。