0%

正威網路行銷工作室，專注於基隆、台北與全台客製化網頁設計，提供專業 RWD 響應式、SEO 搜尋引擎優化、品牌形象設計與網站維護託管服務。

搜尋文章
聯絡資訊
電話0932-260-881
電子郵件playpssss@gmail.com
地址基隆市仁二路 220 號 5 樓
追蹤我們
聯絡資訊
電話0932-260-881
電子郵件playpssss@gmail.com
地址基隆市仁二路 220 號 5 樓
追蹤我們
聯絡我們

純 CSS 工具提示（tooltip）：用 data 屬性做

首頁文章列表CSS語法代碼純 CSS 工具提示（tooltip）：用 dat...
純 CSS 工具提示（tooltip）：用 data 屬性做 封面
CSS語法代碼

網站上有些專有名詞，客人不一定懂，例如「SSL 憑證」「網域」「RWD」。一個一個寫括號解釋，文章會很長；不解釋，客人又看不懂。

這時候可以用工具提示（tooltip）：滑鼠移到詞上，旁邊跳出一個小框寫說明。這篇用 HTML 的 data 屬性加上 CSS 做，不用寫 JavaScript，電腦、手機、鍵盤都能用。

HTML

HTML
<p>網站要有 <span class="tip" tabindex="0" data-tip="讓網址列出現鎖頭、資料加密傳送的憑證">SSL 憑證</span>，瀏覽器才不會顯示「不安全」。</p>
  • 說明文字寫在 data-tip 屬性裡。data- 開頭的屬性可以自己取名字，用來放額外的資料。
  • tabindex="0" 讓這個詞可以用鍵盤的 Tab 鍵移過去，不用滑鼠的人也看得到說明。

CSS

CSS
.tip {
  position: relative;
  border-bottom: 1px dotted #1e8a8a;
  color: #1e8a8a;
  cursor: help;
}
/* 說明框 */
.tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #223;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  white-space: pre-line;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s;
  pointer-events: none;
  z-index: 10;
}
/* 說明框下面的小三角形 */
.tip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #223;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s;
  pointer-events: none;
}
/* 滑鼠滑過、或用鍵盤移到這個詞時顯示 */
.tip:hover::after, .tip:hover::before,
.tip:focus-visible::after, .tip:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

重點說明：

  • content: attr(data-tip)：把 HTML 裡 data-tip 的文字拿來當說明框的內容。這是整個做法的關鍵。
  • ::after 是說明框，::before 是小三角形：三角形用一個沒有寬高、只有邊框的元素畫出來，只讓上邊框有顏色。
  • width: max-content 加上 max-width: 260px：字少的時候框跟著縮小，字多的時候最寬 260 像素，再自動換行。
  • white-space: pre-line：data-tip 裡有換行，說明框就跟著換行，可以做多行的提示。
  • pointer-events: none：說明框不會擋住滑鼠，滑過去不會一閃一閃。
  • :focus-visible：用鍵盤 Tab 移過來時也會顯示。

多行的提示

在 data-tip 裡直接換行就好：

HTML
<span class="tip" tabindex="0" data-tip="第一行：網站速度
第二行：安全更新
第三行：備份狀態">半年健檢報告</span>

如果編輯器會把換行吃掉，可以改寫成 &#10;，效果一樣。

靠左、靠右、往下彈出

說明框預設在詞的正上方、置中。詞如果在畫面最左邊或最右邊，說明框會超出螢幕，在手機上還會讓整個頁面可以左右滑動。加上這幾個 class 解決：

CSS
/* 靠左對齊：放在畫面左邊的詞 */
.tip.tip-left::after { left: 0; transform: none; }
.tip.tip-left::before { left: 12px; transform: none; }
/* 靠右對齊：放在畫面右邊的詞 */
.tip.tip-right::after { left: auto; right: 0; transform: none; }
.tip.tip-right::before { left: auto; right: 12px; transform: none; }
/* 往下彈出：放在頁面最上面的詞 */
.tip.tip-bottom::after { bottom: auto; top: calc(100% + 10px); }
.tip.tip-bottom::before { bottom: auto; top: calc(100% - 2px); border-top-color: transparent; border-bottom-color: #223; }

使用時寫成 class="tip tip-right"。

實際測試的結果

在 Chrome 測了電腦和手機：

  1. 電腦，滑鼠滑過：說明框出現在詞的正上方，小三角形對準詞的中間；滑鼠移開就消失。
  2. 長的說明：寬度停在 260 像素，自動換成兩行。
  3. 多行提示：三行分開顯示。
  4. 鍵盤：按 Tab 移到第一個詞，說明框出現；再按一次 Tab 移到下一個詞，前一個消失、新的出現。
  5. 電腦，用滑鼠點一下再移開：說明框會消失，不會一直卡在畫面上。
  6. 手機 390 寬，點一下詞：說明框出現；點頁面其他地方就消失。
  7. 手機，畫面最右邊的詞：沒加 tip-right 時，說明框超出螢幕，整個頁面寬度從 390 變成 465 像素，可以左右滑動；加上 tip-right 之後，說明框靠右對齊，完整留在螢幕裡。

什麼時候不要用

  • 重要的資訊不要只放在提示裡：價格、注意事項、退貨規定，要直接寫在頁面上。提示是補充說明。
  • 不要放連結、按鈕：說明框是用 CSS 畫出來的文字，裡面不能點。需要互動的內容，請用可以展開的區塊。
  • 一頁不要放太多：每個詞都有虛線，讀起來會很累。

放進 WordPress

  • CSS：區塊佈景主題放在「外觀 → 編輯器 → 樣式 → 額外 CSS」；傳統佈景主題放在「外觀 → 自訂 → 額外 CSS」，或子佈景主題的 style.css。
  • HTML：在文章裡加一個「自訂 HTML」區塊，或把段落切換成「以 HTML 格式編輯」，把要加提示的詞改成上面的 span。

延伸閱讀

讓客人看得懂，網站才有說服力。正威網路行銷是 25 年經驗的基隆網頁設計工作室，網站管家年費包含每年 12 次小修改，像這樣的小調整都可以交給我們，台北與全台客戶也歡迎免費諮詢。

分享這篇文章

CSS 動畫入門：transition、@keyframes 寫法，Animate.css 怎麼用（WordPress 適用） 封面CSS語法代碼CSS 動畫入門：transition、@keyframes 寫法，Animate.css 怎麼用（WordPress 適用）CSS transform 怎麼用：位移、旋轉、縮放、transform-origin，順序為什麼會影響結果 封面CSS語法代碼CSS transform 怎麼用：位移、旋轉、縮放、transform-origin，順序為什麼會影響結果CSS 段落縮排、凸排怎麼寫：text-indent 首行空兩字（WordPress 適用） 封面CSS語法代碼CSS 段落縮排、凸排怎麼寫：text-indent 首行空兩字（WordPress 適用）
返回文章列表更多「CSS語法代碼」文章

發表留言

還沒有人留言，歡迎第一個分享你的想法或問題。留言經審核後才會顯示，Email 不會公開。

讓我們一起打造
您的專屬網站！

立即免費諮詢