CSS - 工具提示

上一頁
下一頁

CSS 工具提示是當用戶將滑鼠懸停在元素上時出現的小型彈出框，提供附加資訊或更多上下文。工具提示使用 CSS 屬性 inset、translateX、translateY 等進行樣式設定和定位。在本教程中，我們將學習如何使用 CSS 建立、定位和設定工具提示的樣式。

演示工具提示示例

以下部分顯示了演示工具提示的示例。當您將滑鼠懸停在下面的文字上時，工具提示將可見。

頂部工具提示
右側工具提示
左側工具提示
底部工具提示

目錄


 

如何在 CSS 中建立工具提示？

以下是使用 CSS 和 HTML 建立工具提示的步驟。

  • 設定元素：建立您想要懸停以觸發工具提示的元素。這可以是按鈕、影像或任何其他 HTML 元素。
  • 建立工具提示文字：使用<span>元素建立工具提示容器，並在其中包含工具提示的文字。請確保最初使用 CSS 中的visibility: hidden屬性將其隱藏。
  • 定位工具提示：使用 CSS 定位屬性將工具提示元素放置在容器周圍的正確位置。這包括在工具提示上設定“position: absolute”，在容器上設定“position: relative”。
  • 設定工具提示樣式：透過設定背景顏色、文字顏色、內邊距等來自定義工具提示的外觀。
  • 在懸停時顯示工具提示：應用 CSS 懸停效果來更改使用者將滑鼠懸停在目標元素上時工具提示的可見性。這將顯示工具提示。

基本工具提示

以下示例演示瞭如何使用 CSS 建立基本的工具提示。當用戶將滑鼠懸停在文字上時，將顯示工具提示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #000;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body>
    <h3>Hover over the text below to see the tooltip</h3>

    <div class="tooltip">
        Hover over this text
        <span class="tooltiptext"> This is a tooltip </span>
    </div>
</body>

</html>

工具提示定位

使用 CSS 定位規則，我們可以將工具提示定位在主容器周圍的任何位置，例如頂部、底部、左側或右側。

要定位工具提示，首先需要將“position: relative;”屬性設定為工具提示的元素容器。它允許具有“position: absolute”的子元素相對於元素容器進行定位。可以使用inset屬性（如 top、bottom、right 和 left）輕鬆調整絕對定位元素的位置。

.element {
   position: relative;
}
.tooltip{
    position: absolute;
    top: 50px; 
    left: 50px;
}

工具提示元素將放置在容器元素頂部邊框上方 50 畫素和左側邊框左側 50 畫素處。

現在讓我們來看一下在所有不同方向顯示工具提示的示例。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container{
            display: flex;
            justify-content: space-around;
            margin-top: 10%;
        }
        .tooltip-container {
            position: relative;
        }
        
        .button{
            font-family: san-serif;
            font-weight: bold;
            padding: 2px;
            border-radius: 5px;
            background-color: white;
        }

        .tooltip-container .tooltip-text {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        /* Tooltip on top */
        .tooltip-top .tooltip-text {
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Tooltip on bottom */
        .tooltip-bottom .tooltip-text {
            top: 125%;
            left: 50%;
            transform: translateX(-50%); /* To center on top side */
        }

        /* Tooltip on left */
        .tooltip-left .tooltip-text {
            top: 50%;
            right: 125%;
            transform: translateY(-50%);
        }

        /* Tooltip on right */
        .tooltip-right .tooltip-text {
            top: 50%;
            left: 125%;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="tooltip-container tooltip-top">
            <button class="button">Top </button>
            <span class="tooltip-text">Tooltip on top</span>
        </div>
        
        <div class="tooltip-container tooltip-right">
            <button class="button">Right </button>
            <span class="tooltip-text">Tooltip on right</span>
        </div>

        <div class="tooltip-container tooltip-left">
            <button class="button">Left </button>
            <span class="tooltip-text">Tooltip on left</span>
        </div>
        
        <div class="tooltip-container tooltip-bottom">
            <button class="button">Bottom</button>
            <span class="tooltip-text">Tooltip on bottom</span>
        </div>
    </div>
</body>

</html>

工具提示箭頭

要為工具提示建立一個從工具提示特定側面出現的箭頭，請在工具提示後新增“空”內容，使用偽元素::after和 content 屬性。然後可以使用 border 屬性來塑造和著色箭頭。

/* Arrow styles */
.tooltip-text::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

我們只為邊框的一側設定顏色，這將導致頂部出現三角形邊框，因為內容為空。要了解更多關於如何在 CSS 中建立箭頭的知識，請訪問我們關於CSS 箭頭的免費教程。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container{
            display: flex;
            justify-content: space-around;
            margin: 10%;
        }
        .tooltip-container {
            position: relative;
        }
        
        .button{
            font-family: san-serif;
            font-weight: bold;
            padding: 2px;
            border-radius: 5px;
            background-color: white;
        }

        .tooltip-container .tooltip-text {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        /* Tooltip on top */
        .tooltip-top .tooltip-text {
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Tooltip on right */
        .tooltip-right .tooltip-text {
            top: 50%;
            left: 125%;
            transform: translateY(-50%);
        }

        /* Arrow styles */
        .tooltip-text::after {
            content: "";
            position: absolute;
            border-width: 5px;
            border-style: solid;
        }

        /* Arrow pointing up for top tooltip */
        .tooltip-top .tooltip-text::after {
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-color: black transparent transparent transparent;
        }

        /* Arrow pointing left for right tooltip */
        .tooltip-right .tooltip-text::after {
            top: 50%;
            left: -10px;
            transform: translateY(-50%);
            border-color: transparent black transparent transparent;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="tooltip-container tooltip-top">
            <button class="button">Top </button>
            <span class="tooltip-text">Tooltip on top</span>
        </div>
        
        <div class="tooltip-container tooltip-right">
            <button class="button">Right </button>
            <span class="tooltip-text">Tooltip on right</span>
        </div>
    </div>
</body>

</html>

淡入工具提示

CSS 淡入工具提示或工具提示動畫是一個逐漸出現並帶有淡入效果的工具提示，建立了流暢且視覺上吸引人的過渡。

要建立淡入工具提示，首先需要將工具提示元素的不透明度設定為 0，然後對於工具提示元素的懸停狀態，將不透明度設定為 1。現在使用transition將不透明度從 0 平滑地更改為 1。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
            margin: 10%;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 2s;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body style="text-align:center;">
    <div class="tooltip">
        Hover over this text
        <span class="tooltiptext">
            This is a fade-in tooltip
        </span>
    </div>
</body>

</html>

工具提示的優點

  • 工具提示提供額外的資訊，而不會使網頁凌亂。它們幫助使用者更好地理解網頁的不同部分。
  • CSS 工具提示可以自定義並放置在不同螢幕和裝置的不同位置。這使得它們對於所有型別的網站都很有用，即使是那些在不同螢幕上大小會發生變化的網站。
  • CSS 工具提示高度可定製，它允許開發人員根據網站的設計主題（包括顏色、字型和動畫）對其進行樣式設定。
  • 實現 CSS 工具提示相對簡單，不需要複雜的 JavaScript 或附加庫。
列印頁面
上一頁
下一頁
廣告