次世代 Hugo

無駄を削ぎ、本質を研ぐ

實作 Tooltip (純 CSS)

Sam Xiao's Avatar 2024-05-26

Tooltip 為實務上常見效果，可完全使用 CSS 實現。

Version

CSS 3

Page

tooltip01

當 hover 過 Hover over me! 時，會在右側顯示紅色 I'm tooltip。

Template

<template>
  <div class="title">
    Hover over me!
  </div>
</template>

<style scoped>
.title {
  position: relative;
  top: 20px;
  border-bottom: 1px solid #f00;
  display: inline-block;
}

.title:before {
  content: "I'm tooltip";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  margin-left: 18px;
  width: 100px;
  padding: 10px;
  border-radius: 10px;
  background: #f00;
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
}

.title:hover:before {
  opacity: 1;
}

.title:after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  margin-left: -2px;
  border: 10px solid;
  border-color: transparent #f00 transparent transparent;
  opacity: 0;
  transition: opacity 1s;
}

.title:hover:after {
  opacity: 1;
}
</style>

第 2 行

<div class="title">
  Hover over me!
</div>

HTML 部分並沒有 tooltip，完全由 CSS 產生。

第 8 行

.title {
  position: relative;
  top: 20px;
  border-bottom: 1px solid #f00;
  display: inline-block;
}

設定 title style：

  • position: relative：before 與 after 即將使用 absolute position，因此在父層使用 relative position 定位
  • top: 20px：設定 title 上緣與 browser 距離
  • border-bottom: 1px solid #f00：設定 title 下方紅線 underline
  • display: inline-block：使 <div> 與 content 同寬，否則 underline 寬度會一整列，且 tooltip 也會顯示在 browser 之外

15 行

.title:before {
  content: "I'm tooltip";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  margin-left: 18px;
  width: 100px;
  padding: 10px;
  border-radius: 10px;
  background: #f00;
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
}

使用 before 設定 tooltip style：

  • content: "I'm tooltip"：設定 tooltip 內容
  • position: absolute：設定使用 absolute postion
  • top: 50%：設定 tooltip 的 top 為父層 title 高度的一半
  • transform: translateY(-50%)：設定 tooltip 向上移動本身高度的一半，此為 垂直置中 慣用 pattern
  • left: 100%：設定 tooltip 的 left 為父層 title 的寬度
  • margin-left: 18px：設定 tooltip 的 left margin 放置三角形
  • width: 100px：設定 tooltip 的 width
  • padding: 10px：設定 tooltip 的 padding
  • border-radius: 10px：設定 tooltip 的四角為弧形
  • background: #f00：設定 tooltip 背景為紅色
  • color: #fff：設定 tooltip 的文字為白色
  • text-align: center：設定 tooltip 文字水平置中
  • opacity: 0：設定 tooltip 一開始不顯示
  • transition: opacity 1s：設定 tooltip 改變 opacity 時，使用 1s 漸漸改變

32 行

.title:hover:before {
  opacity: 1;
}

當 hover 過 title 時，設定 tooltip style：

  • opacity: 1：設定 tooltip 顯示

title:hover:before 相當於 CSS 的 hover event handler

36 行

.title:after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  margin-left: -2px;
  border: 10px solid;
  border-color: transparent #f00 transparent transparent;
  opacity: 0;
  transition: opacity 1s;
}

使用 after 設定 triangle style：

  • content: ''：將 content 設定為 empty string，避免 triangle 不顯示
  • position: absolute：設定使用 absolute postion
  • top: 50%：設定 triangle 的 top 為父層 title 高度的一半
  • transform: translateY(-50%)：設定 triangle 向上移動本身高度的一半，此為 垂直置中 慣用 pattern
  • left: 100%：設定 triangle 的 left 為父層 title 的寬度
  • margin-left: -2px：設定 triangle 與 title 間距離
  • border: 10px solid：因為 triangle 主要是由 border 實現，統一設定 border 為 10px 與 solid
  • border-color: transparent #f00 transparent transparent：設定四個 border 顏色
  • opacity: 0：設定 triangle 一開始不顯示
  • transition: opacity 1s：設定 tooltip 改變 opacity 時，使用 1s 漸漸改變

49 行

.title:hover:after {
  opacity: 1;
}

當 hover 過 title 時，設定 triangle style：

  • opacity: 1：設定 triangle 顯示

title:hover:after 相當於 CSS 的 hover event handler

Conclusion

  • 實現 tooltip 需包括相當多 CSS 技巧：
    • 使用 before 顯示 tooltip
    • 使用 after 顯示 triangle
    • 使用 relative/absolute 定位 tooltip 與 triangle
    • 使用 transform 垂直置中
    • 使用 transform 實現 fade-in / fade-out
    • 使用 border 畫 triangle

Reference

LogRocket, Creating beaufiful tooltips with only CSS

# CSS