HTML/CSS

2014.02.27

用 data-* 屬性做出純 CSS 的 tooltip


最近因為案子需求,要做「tooltip」的功能,簡單來說,tooltip 是一種「當滑鼠移過文字時,會跳出一個簡短的提示說明」的特效。

tooltip 技術已存在很久,發展也有一段時間了,不論是用純 CSS 製作,或是透過 JavaScript 控制都有人寫過,不過最近我發現還可以利用 HTML5 的新標籤 data-* 達成。去年我有寫過一篇利用data-*在 HTML 以及 jQuery 存取資料的文章,但 data-* 厲害的地方不僅在此,我們還可以直接利用 CSS 的 attrdata-* 資料抓出來噢!!

那話不多說,就先上範例吧:


可以看到當滑鼠移過「Hover Me」的文字時,右方會淡出一個提示訊息;滑鼠移過「Push you mouse here」文字時,右方會出現多行的提示。

在此跟各位簡單介紹一下,如何使用 data-* 達成該功能。

在 html 加入 data-* 屬性

首先要做的第一件事情,就是設定 tooltip 的 html 程式碼。我的寫法為:

<div class="tip">
  <span data-tooltip="hello world">Hover Me!!!</span>
</div>

span 裡面寫上 data-tooltip 的屬性,然後可以把它當作 HTML 屬性直接使用,在值(value)裡寫上提示文字。data-tooltip 的「tooltip」名字可以自取,只要前面的格式以 data- 為開頭即可。

在 CSS 利用 attr 抓取 data-* 屬性

CSS 的偽元素是個很強大的東西,我們可以利用他做很多運用,通常為了做一些效果,content:" " 多半會留空,但其實可以在裡面寫上 attr 抓資料歐!

我們可以這樣寫:

.tip span:before {
  content: attr(data-tooltip);
}

attr 裡面塞入我們在 html 新增的 data-tooltip 屬性,這樣偽元素(:before) 就會得到該值。

利用 pre 解決 tooltip 自動換行

將 tooltip 的樣式做好後,也許你會發現文字的換行有點奇怪,可能會出現這樣的情況:

「Hello World」文字並沒有按照預期的情況換行,簡單來說是因為預設會使用空白換行,因此我們可以使用 pre 標籤保留空白字元,寫法為 white-space: pre;

利用 Unicode 字元顯示多行 tooltip

最後,如果我們希望 tooltip 可以顯示多行文字該怎麼辦呢?
一開始我很直覺的在 data-tooltip 裡面加入 br 標籤,但他會直接將 br 秀出來:

後來我發現 bootstrap 有寫好 tooltip 的元件,他的做法是如果你要在 data-* 裡面使用 HTML 標籤,就必須加入一行 data-html="true" 的設定,當時看完覺得超神奇的,他把這串設定寫在 javascript 裡面做判斷,但我還是似懂非懂,不知道 bootstrap 的具體設定方法。

最後,我採用 Unicode \a 作處理。

在想要換行的地方改用 &#xa ; 取代 br,這樣文字就會自動換行囉!!

<div class="tip">
  <span data-tooltip="this is line 1 &#xa ; this is line 2">push you mouse here!!!</span>
</div>

補充

; 的前面其實不需要空格,但如果我不空格,字元會被編輯器吃掉。想看比較完整的語法可以參考 codepen 範例。

參考來源:http://stackoverflow.com/questions/16451553/css-data-attribute-new-line-character-pseudo-element-content-value

雖然我還是很想知道 bootstrap 到底是怎麼寫的,有在 FB 問過朋友,但其實還是看不懂,OTL

總之,data-* 真的是一個強大又好玩的東西,不僅可以自定義屬性(把自己當成 HTML 的規則制定者?),還可以透過 jQuery & CSS 存取~,大家一起來玩吧 😀


更多 CSS 相關文章

guest
3 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Kin
Kin
3 years ago

謝謝您提供這麼好用的資訊, 我這邊有個問題想請問, 上面這個範例滑鼠移到隱藏的視窗也會出現對話窗, 就是, 滑鼠移到隱藏”Hello World”的位置就會出現”Hello World”的視窗, 可以避免掉嗎? 因為我用這著範例, 但對話框文字很多所以對話框很大, 滑鼠不小心就會移到對話框上面, 很容易就把隱藏的對話框叫出來了, 我想要只有滑鼠到原本的文字上”Hover Me”對話框才會出來, 想請問要怎麼做呢? 非常感謝

RURO
RURO
1 year ago
Reply to  Kin

opacity語法改成visibility就可以了,缺點是沒淡出入效果,但你可以自己加animation特效。

opacity: 0; -> visibility: hidden;
opacity: 1; -> visibility: visible;

Kaiyo Hugo
1 year ago
Reply to  RURO

可以用pointer-event:none
又不會誤觸又可以用transition

Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.