CSS 基礎（021_提示框）

原始網址：http://www.w3schools.com/css/css_tooltip.asp

翻譯：

CSS 提示框

使用 CSS 創建提示框。

演示：提示框示例

當用戶移動鼠標指針至元素之上的時候，提示框經常用以對相關內容指定額外信息：

<!DOCTYPE html>
<html>
<head>
<style>
.w3-row::after {
    clear: both;
    content: "";
    display: table;
}

.w3-center {
    text-align: center !important;
}

.w3-quarter {
    float: left;
    width: 25%;
}

.tooltip {
    border-bottom: 1px dotted #ccc;
    color: #006080;
    display: inline-block;
    position: relative;
}

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

.tooltip:hover .tooltiptext {
    opacity: 1;
    visibility: visible;
}

.tooltip-right {
    left: 125%;
    top: -5px;
}

.tooltip-right::after {
    border-color: transparent #555 transparent transparent;
    border-style: solid;
    border-width: 5px;
    content: "";
    margin-top: -5px;
    position: absolute;
    right: 100%;
    top: 50%;
}

.tooltip-bottom {
    left: 50%;
    margin-left: -60px;
    top: 135%;
}

.tooltip-bottom::after {
    border-color: transparent transparent #555;
    border-style: solid;
    border-width: 5px;
    bottom: 100%;
    content: "";
    left: 50%;
    margin-left: -5px;
    position: absolute;
}

.tooltip-top {
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
}

.tooltip-top::after {
    border-color: #555 transparent transparent;
    border-style: solid;
    border-width: 5px;
    content: "";
    left: 50%;
    margin-left: -5px;
    position: absolute;
    top: 100%;
}

.tooltip-left {
    bottom: auto;
    right: 128%;
    top: -5px;
}

.tooltip-left::after {
    border-color: transparent transparent transparent #555;
    border-style: solid;
    border-width: 5px;
    content: "";
    left: 100%;
    margin-top: -5px;
    position: absolute;
    top: 50%;
}
</style>
</head>
<body>
    <div class="w3-row w3-center" style="margin-top: 35px; margin-bottom: 35px;">
        <div class="w3-quarter">
            <div class="tooltip">
                Top <span class="tooltiptext tooltip-top">Tooltip text</span>
            </div>
        </div>
        <div class="w3-quarter">
            <div class="tooltip">
                Right <span class="tooltiptext tooltip-right">Tooltip text</span>
            </div>
        </div>
        <div class="w3-quarter">
            <div class="tooltip">
                Bottom <span class="tooltiptext tooltip-bottom">Tooltip text</span>
            </div>
        </div>
        <div class="w3-quarter">
            <div class="tooltip">
                Left <span class="tooltiptext tooltip-left">Tooltip text</span>
            </div>
        </div>
    </div>
</body>
</html>

基本提示框（Basic Tooltip）

創建提示框以使當用戶移動鼠標至元素之上的時候顯示它：

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute; /* Position the tooltip */
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align: center;">
    <p>Move the mouse over the text below:</p>
    <div class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </div>
    <p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in an desirable way.</p>
</body>
</html>

示例解釋：

HTML) 使用容器元素（如 <div>）並且對它添加 “tooltip” 類。當用戶的鼠標至於 <div> 之上的時候，它將顯示提示文本。提示文本置於以 class=”tooltiptext” 修飾的行內元素（如 <span>）。

CSS) tooltip 類使用 position:relative，用以定位提示文本（position:absolute）。注意：查看以下示例是如何定位提示框的。

tooltiptext 類維持實際的提示文本。在默認情況下，它是隱藏的，基於 hover 顯示。我們也對它添加了某些基本樣式：120px 寬、黑色背景色、白色文本色、文本居中、5px 上下內邊距。

CSS3 的 border-radius 屬性用以添加提示文本的圓角樣式。

當用戶移動鼠標至以 class=”tooltip” 修飾的 <div> 之上時，:hover 選擇器用以顯示提示文本。

定位提示框（Positioning Tooltip）

在這個示例中，提示框置於 “hoverable” 文本的右側（left:105%）。也要注意，是 top:-5px 將它放在了容器元素的中間位置。我們使用數字 5 是因爲提示文本有 5px 的上下內邊距。如果你增加它的內邊距，也要增加 top 屬性的值以確保它居中（如果你想這麼幹）。如果你想讓提示框置於左側，如法炮製。

/* 右側提示框 */
.tooltip .tooltiptext {
    top: -5px;
    left: 105%;
}

<!-- 右側提示框  -->
<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute; /* Position the tooltip */
    z-index: 1;
    top: -5px;
    left: 105%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align: center;">
    <h2>Right Tooltip</h2>
    <p>Move the mouse over the text below:</p>
    <div class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </div>
</body>
</html>

/* 左側提示框 */
.tooltip .tooltiptext {
    top: -5px;
    right: 105%;
}

<!-- 左側提示框  -->
<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute; /* Position the tooltip */
    z-index: 1;
    top: -5px;
    right: 105%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align: center;">
    <h2>Left Tooltip</h2>
    <p>Move the mouse over the text below:</p>
    <div class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </div>
</body>
</html>

如果你想讓提示框出現在上方或下方，查看下列示例。注意，我們設置 margin-left 屬性的值爲 -60px 。這會使提示框居中於懸停式文本（hoverable text）上/下。它被設置爲提示框寬度的一半（120/2 = 60）。

/* 頂部提示框 */

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

<!-- 頂部提示框 -->

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute; /* Position the tooltip */
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align: center;">
    <h2>Top Tooltip</h2>
    <p>Move the mouse over the text below:</p>
    <div class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </div>
</body>
</html>

/* 底部提示框 */

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

<!-- 底部提示框 -->

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute; /* Position the tooltip */
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align: center;">
    <h2>Bottom Tooltip</h2>
    <p>Move the mouse over the text below:</p>
    <div class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </div>
</body>
</html>

提示框箭頭（Tooltip Arrows）

僞元素類 ::after 結合 content 屬性以創建呈現於提示框指定一側的箭頭，在提示框之後添加 “empty” 內容。箭頭自身由邊框創建。這使得提示框看起來像是會話泡（speech bubble）。
這個示例演示如何在提示框的底部添加箭頭：

/* 底部箭頭 */
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

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

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align: center;">
    <h2>Top Tooltip w/ Bottom Arrow</h2>
    <div class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </div>
</body>
</html>

示例解釋

在提示框內定位箭頭：top: 100% 使箭頭置於提示框的底部。left: 50% 使箭頭居中。
注意：border-width 屬性指定箭頭大小。如果你對它進行變更，也要對 margin-left 值做相同的變更。這會使箭頭保持居中。
border-color 用以將內容轉變爲箭頭。我們設置頂部邊框爲黑色，剩餘部分爲透明。如果各個邊框（上、下、左、右）均爲黑色，你會得到一個黑方盒（a black square box）。
這個示例演示如何將箭頭添加到提示框頂部。注意：我們這次設置了底邊框的顏色：

/* 頂部箭頭 */
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align: center;">
    <h2>Bottom Tooltip w/ Top Arrow</h2>
    <div class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </div>
</body>
</html>

這個示例演示如何將箭頭添加到提示框左側：

/* 左側箭頭 */
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align: center;">
    <h2>Right Tooltip w/ Left Arrow</h2>
    <div class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </div>
</body>
</html>

這個示例演示如何將箭頭添加到提示框右側：

/* 右側箭頭 */
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 110%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align: center;">
    <h2>Left Tooltip w/ Right Arrow</h2>
    <div class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </div>
</body>
</html>

淡入提示框（Fade In Tooltips）

如果你想在提示框即將顯現的時候有淡入提示框文本的效果，你可以使用 CSS3 的 transition 屬性結合 opacity 屬性的方式，將它在特定的秒數內從完全不可見變爲 100% 可見（本例設置時間爲 1 秒）：

.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    opacity: 1;
}

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align: center;">
    <h2>Fade In Tooltip on Hover</h2>
    <p>When you move the mouse over the text below, the tooltip text
        will fade in and take 1 second to go from completely invisible to
        visible.</p>
    <div class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </div>
</body>
</html>

注意：你將在之後的章節中學習到更多有關過渡、動畫效果的內容。

CSS 基礎（021_提示框）

DAPPER 事務 TRANSACTION

Java中線程的創建方式

web前端（001_滾動效果）

CSS 基礎（020_下拉式菜單）

CSS 基礎（019_導航欄）

CSS 基礎（009_Max-width）

CSS3 基礎（005_3D 變換）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結