首页 > 程序开发 > web前端 > HTML/CSS > 正文
CSS基础(021_提示框)
2016-10-29       个评论    来源:Google2606的博客  
收藏    我要投稿

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” 修饰的

之上时,: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>

点击复制链接 与好友分享!回本站首页
上一篇:js面向对象的基本概念和基本使用方法
下一篇:基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站