CSS基础（021_提示框）-前端--易笔记-weiyer.com

　　核心提示：CSS 提示框使用 CSS 创建提示框。演示：提示框示例当用户移动鼠标指针至元素之上的时候，提示框经常用以对相关内容指定额外信息： !DOCTYPE htmlhtmlheadstyle.w3-row:...

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>
    <p class="w3-row w3-center" style="margin-top: 35px; margin-bottom: 35px;">
        <p class="w3-quarter">
            <p class="tooltip">
                Top <span class="tooltiptext tooltip-top">Tooltip text</span>
            </p>
        </p>
        <p class="w3-quarter">
            <p class="tooltip">
                Right <span class="tooltiptext tooltip-right">Tooltip text</span>
            </p>
        </p>
        <p class="w3-quarter">
            <p class="tooltip">
                Bottom <span class="tooltiptext tooltip-bottom">Tooltip text</span>
            </p>
        </p>
        <p class="w3-quarter">
            <p class="tooltip">
                Left <span class="tooltiptext tooltip-left">Tooltip text</span>
            </p>
        </p>
    </p>
</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>
    <p class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </p>
    <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) 使用容器元素（如 <p>）并且对它添加 “tooltip” 类。当用户的鼠标至于 <p> 之上的时候，它将显示提示文本。提示文本置于以 class=”tooltiptext” 修饰的行内元素（如 <span>）。

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

tooltiptext 类维持实际的提示文本。在默认情况下，它是隐藏的，基于 hover 显示。我们也对它添加了某些基本样式：120px 宽、黑色背景色、白色文本色、文本居中、5px 上下内边距。

CSS3 的 border-radius 属性用以添加提示文本的圆角样式。

当用户移动鼠标至以 class=”tooltip” 修饰的

之上时，: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>
    <p class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </p>
</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>
    <p class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </p>
</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>
    <p class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </p>
</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>
    <p class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </p>
</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>
    <p class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </p>
</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>
    <p class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </p>
</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>
    <p class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </p>
</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>
    <p class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </p>
</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>
    <p class="tooltip">
        Hover over me <span class="tooltiptext">Tooltip text</span>
    </p>
</body>
</html>

CSS基础（021_提示框）

时间：2016/10/29 9:20:01 点击：

本类热门

本类推荐

本类固顶

CSS基础（021_提示框）

时间：2016/10/29 9:20:01 点击：

您可能感兴趣的文章

相关评论

发表我的评论

本类热门

本类推荐

本类固顶