純CSS實現文字氣泡提示效果

網站建設 2022-09-06 次

今天來看看，如何只通過CSS實現下面這樣的文字氣泡提示效果。

核心點：

data-* 屬性，HTML5規范允許我們使用 data-* 屬性來嵌入自定義數據。

attr() 函數，attr()函數通常配合content屬性使用，可以返回選擇元素的屬性值。

完整代碼：

html代碼

class="text">
  請你打開電視看看 多少人為生命在努力勇敢的走下去。—— 
  class="tooltip" data-tip="《稻香》">周杰倫</span>
p>

css代碼

.text {
  font-size: 16px;
  margin-top: 300px;
  text-align: center;
}
.tooltip {
  position: relative;
  font-size: 14px;
  cursor: default;
}
.tooltip::before {
  content: attr(data-tip); /* 注意data-tip不加引號 */
  position: absolute;
  top: -37px;
  left: 50%;
  transform: translatex(-50%);
  display: none;
  padding: 4px 8px;
  background-color: #303133;
  color: #fff;
  font-size: 12px;
  white-space: nowrap; /* 防止父元素寬度不夠，文字換行 */
  border-radius: 4px;
}
.tooltip::after {
  content: '';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translatex(-50%) rotate(45deg);
  display: none;
  width: 10px;
  height: 10px;
  background-color: #303133;
  border-radius: 2px;
}
.tooltip:hover::before,
.tooltip:hover::after {
  display: block;
}