CSS基础-16-提示工具

1.基本实现

<style>
/* Tooltip 容器 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
 
/* Tooltip 文本 */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* 定位 */
    position: absolute;
    z-index: 1;
}
 
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
 
<div class="tooltip">鼠标移动到这
  <span class="tooltiptext">提示文本</span>
</div>

• 效果
  

2. 提示框位置

2.1 提示框在 [ 左 | 右 ]

.tooltip .tooltiptext {
    ……
    top: -5px;
    left: 105%;
}

2.2 提示框在[顶端|底端]

.tooltip .tooltiptext {
    ……
    bottom: 100%;
    left: 50%;
    margin-left: -60px;/* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

3. 添加箭头

3.1 顶部提示 底部箭头

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* 提示框在箭头上边 */
    left: 50%; /* 从最左端移到中间 */
    margin-left: -5px; /* 左偏 5px */
    border-width: 5px; /* 箭头半边宽5px（加上左偏5 正好在中间） */
    border-style: solid; /* 箭头实际是个小方块（下边会填成箭头） */
    /* 画箭头：组成方形的四个三角形（上、右、下、左）上黑色，其他三个透明 */
    border-color: black transparent transparent transparent;
}

• 效果
  

3.2 底部提示 顶部箭头

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* 提示框在箭头下方 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    /* 画箭头见 3.1 */
    border-color: transparent transparent black transparent;
}

3.3 右侧提示框/左侧箭头

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%; /* 即箭头和提示框在同一水平线 */
    right: 100%; /* 提示框在箭头右侧100%位置，即箭头（方块）在左侧紧邻 */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

3.4 左侧提示框/右侧箭头

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* 提示框在箭头左侧100%的位置，即箭头（方块）在右侧紧邻 */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

4. 淡入

.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}
 
.tooltip:hover .tooltiptext {
    opacity: 1;
}