前端雜技 - 滑鼠停留時跳出資訊之純 CSS 解法

2024-11-12 10:37 PM

手邊有個小需求是想在網頁特定元素加上 Tooltip 效果，滑鼠滑過時能顯示補充資訊。

最簡單的做法是是為元素加上 title ，例如：<a href="#" title="黑暗執行緒部落格 https://blog.darkthread.net">黑暗執行緒</a>，瀏覽器內建滑鼠停留在連結上方會顯示 title 內容。

但這種做法有個小缺點，由於屬瀏覽器內建行為，顯示位置大小顏色全都無法客製化。想自訂顯示樣式，有許多現成的 Tooltip 外掛，像是 Bootstrap 就有提供還支援各種樣式及自訂彈性，但前題是要呼叫 JavaScript 啟用算是美中不足，尤其是內容動態更新後得設法重新套用，有點麻煩。

於是我想找純 CSS 實現的做法，如此 AJAX 或 Vue 動態更新 HTML 內容時，只要 class 設好便能無痛套用，是我心中更理想的解決方案。

跟 Github Copilot 做了簡短討論，很快找到滿意解法(過程完全沒 Google，難怪部落格點閱數在 AI 興起後不斷下滑，我自己也是幫兇呀)，用 ::after 虛擬元素加上文字框，用 content: attr(data-title); 抓取 data-title="..." 決定文字內容，再使用 position: absolute 將位置拉到文字上方，left: 50%; transform: translateX(-50%); 置中；箭頭則用 ::before 加 border-color: <color> transparent transparent transparent; 邊框技巧模擬向下三角形，最後配合 :hover 切換顯示與否，一個簡單輕巧的純 CSS 標題 Tooltip 就做好了。

附上程式範例與線上展示：(註：網頁文字使用中文假字生成器產生)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title as Tooltip</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .link-tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;

            &::before,
            &::after {
                position: absolute;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s;
                left: 50%;
                transform: translateX(-50%);

            }


            &::after {
                /* 文字框 */
                content: attr(data-title);
                bottom: 100%;
                background-color: dodgerblue;
                color: #fff;
                padding: 5px 25px;
                border-radius: 5px;
                white-space: nowrap;
            }

            &::before {
                /* 向下三角形 */
                content: '';
                position: absolute;
                bottom: 40%;
                border-width: 10px;
                border-style: solid;
                border-color: dodgerblue transparent transparent transparent;
            }

            &:hover::before,
            &:hover::after {
                opacity: 1;
                visibility: visible;
            }

        }
    </style>
</head>

<body>
    <div class="container d-flex justify-content-center">
        <div class="row w-100 p-3" style="max-width: 80%">
            <div class="col-12">
                <h3>往鳥花文空往干姐雨身許</h3>
                <p>
                    面路兆自開直讀或訴喝抓不牛小，出只虎回化文，蝸禾共蝴耳安風弓經？能經眼福共故空走戊幼家王節由。
                    買西豆多由<a class="link-tooltip" href="#" data-title="黑暗執行緒部落格 https://blog.darkthread.net">黑暗執行緒</a>，
                    祖首游苦位玩拉車做乞虎師很羊十前第視哭？具時乾躲呀少外巴，紅洋各故片青千。
                    世裝比幫第占秋「假怕士笑」結黑園馬麻已給今父母、斗至會文出坐怪像第升詞小豆婆爸過中
                    「喜寸動司隻古間乾忍」小虎說背念布雄斤兒八黑朵這功？麼手室見只比明我而長麻春。
                    跑南但占從爬瓜玉毛馬田笑胡斗院「貓神早央車而方姊」葉。
                </p>
            </div>
        </div>
    </div>
</body>

</html>

前端雜技 - 滑鼠停留時跳出資訊之純 CSS 解法

Comments

# 2024-11-13 08:06 AM by ChrisTorng

Post a comment