CSS 基础（021_提示框）

最新推荐文章于 2024-05-03 00:15:06 发布
最新推荐文章于 2024-05-03 00:15:06 发布
阅读量1k 收藏
点赞数
分类专栏： CSS 文章标签： css

原始网址：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%;
}

定位提示框（Positioning 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: -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%;
}

定位提示框（Positioning 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: -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 */
}

定位提示框（Positioning 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 */
}

定位提示框（Positioning 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;
}

提示框箭头（Tooltip Arrows）

<!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;
}

提示框箭头（Tooltip Arrows）

<!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;
}

提示框箭头（Tooltip Arrows）

<!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;
}

提示框箭头（Tooltip Arrows）

<!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;
}

淡入提示框（Fade In Tooltips）

<!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>

注意：你将在之后的章节中学习到更多有关过渡、动画效果的内容。

柯南道尔2606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
不同css样式的消息提示框
04-28
包含了几种css消息提示框，通过js控制
html+css创建提示框
weixin_30940783的博客
09-16 585
看到下面的效果了吗？ 本来我们站点是用下面的图片做的背景， 但是后期当更改完框中的提示内容，并且更新内容较多的时候，发现内容溢出了，如下图： 但是背景图片不能自动拉伸，还得重新做一张背景图，这样就导致没更新一次信息就得重新绘制一张背景图，经过qq网名为虫子²º¹³的大牛指点，用html + css，但不使用背景图片，同样做出了这种效果，直接上代码： <!DOCTY...
CSS 实现提示框
weixin_34414196的博客
04-23 1691
2019独角兽企业重金招聘Python工程师标准>>> ...
css画一个提示框
setsunadoudou的博客
09-29 579
tml lang="zh-cn"> css画一个提示框 - kristy1993 - 博客园 kristy1993 博客园 首页 新随笔 订阅 管理 随笔 - 25 文章 - 0 评论 - 4 c...
CSS实现提示框的效果
surpassone的专栏
09-05 2280
IE和firefox的dom模型重要的两点差别： 使用attr方法来获取属性的时候，IE中的属性节点比firefox多了很多没有定义的节点。 文本节点的数量和内容也不一样，有些换行和空格等无意义的东西IE并不会显示，而firefox则会将这些信息保留下来。 doucument在dom中的地位 document属根节点，是一个虚幻的内容，而html节点是根元素节点，是一个实际的东西。 CSS实现提示框
运用HTML、CSS、JavaScript基础制作页面
06-10
2．Css部分参考上图，但是不限于上图，可以发挥自己的想象，例如加背景图，对上图的展现形式做优化等等。 3．注册按钮点击后，出来弹出框，弹出框信息为注册成功或者注册失败（注册失败以后，点击弹出框的确定按钮，...
client_prototype:Web 客户端概念原型验证的基础框架
07-12
Web 客户端概念原型验证的基础框架 项目开发 您需要在您的机器上安装 ，并在路径中工作 需要安装项目的依赖——项目根目录下的npm install 要启动项目，打开你的 shell 到项目的根文件夹，然后运行： ./run_dev_...
W3C联盟系统v2.0_采用UIkit框架
06-25
网站状态可关闭开启等操作自定义提示关站内容。 修改了css及js无需清除浏览器缓存主题版本变更下即可。 上传配置、可自定义配置上传文件后缀，上传到七牛云端，上传大小，编辑器截图粘贴配置图片类型、base64 保存...
Bootstrap前端框架 5.0.0 beta1
05-01
＃29370:创建基础组件；＃31178:将Popper更新到2.x；＃31827:在数据属性中添加名称空间“ bs”；＃32095:JS:使用更多的“现代” API；＃32124:tooltip.js:删除_fixTitle()；＃32152:修复.close实例；＃32154:...
CSS工具提示
南明离火的博客
06-28 408
CSS工具提示
html css帮助提示,html+css创建提示框
weixin_29469949的博客
06-22 299
看到下面的效果了吗？本来我们站点是用下面的图片做的背景，但是后期当更改完框中的提示内容，并且更新内容较多的时候，发现内容溢出了，如下图：但是背景图片不能自动拉伸，还得重新做一张背景图，这样就导致没更新一次信息就得重新绘制一张背景图，经过qq网名为虫子²º¹³的大牛指点，用html + css，但不使用背景图片，同样做出了这种效果，直接上代码：Document.tip{position: absol...
c3 笔记8 css排版技巧
最新发布
weixin_63492023的博客
05-03 236
相关内容：边界、边框、位置（absolute、relative、static）、overflow、z-index、超链接、鼠标光标特效、……©《HTML5+CSS3+JavaScript网页设计》陈婉凌编，清華大学出版社。margin:上边界值 右边界值 下边界值 左边界值。
这是一个简单的照明材料网站，后续还会更新
m0_64180190的博客
04-29 2460
产品中心|联系方式|新闻动态网页首页|产品中心|联系方式|新闻动态
第二弹：走进CSS世界，学习记录
weixin_64638001的博客
04-29 832
当选择器包含多种选择器时，需要将多种选择器优先级相加然后进行比较。选择器的优先级不会超过它最大数量级，如果选择器优先级一样，则使用靠后的样式。子选择器：选择器1 > 选择器2 表示选择器1的子元素为选择器2(只有父子关系才可以)。相邻选择器：选择器1 + 选择器2 表示选择紧贴在选择器1之后的选择器2元素。兄弟选择器：选择器1 ~ 选择器2 表示选择器1后面的所有兄弟元素选择器2。包含选择器：选择器1 选择器2 表示选择器2被选择器1包含即可。组合选择器：选择器1,选择器2 多个选择器之间用逗号分隔。
前端科举八股文-CSS篇
星海拾遗
04-25 1091
BFC 块级格式化上下文，它是指页面的一块独立的渲染区域，和其他区域相互独立出来互不干扰。它可以解决外边距折叠和高度塌陷的问题。根据它的定义，可以设置position不为static，overflow不为visible，或者设置浮动都可以设置BFC。
CSS实现各种优惠券效果
JavaScritp
04-29 219
CSS实现各种优惠券效果。
探索 CSS 动画中的 steps() 函数：精准控制动画节奏
艾恩小灰灰的博客
05-02 417
steps()函数为CSS动画设计带来了新的维度，使得开发者能够创造出独特且富有节奏感的视觉效果。通过调整步数和跳变点，你可以灵活地控制动画的每一个细节，为用户界面增添更多趣味性和专业性。掌握这一技巧，无疑能让你的Web项目在视觉体验上更上一层楼。继续探索和实践，让创意和细腻的动画设计成为你作品的亮点。
css代码的定位及浮动
2401_83693610的博客
04-28 524
上次，我们解除了css的内外边距、鼠标悬停及其练习。现在我们学习css元素练习和定位。
css实现告警提示动画
09-17
首先，我们可以使用一个带有红色背景和白色文字的警告框作为基础样式。我们可以使用CSS属性来设置背景色，文本颜色，圆角等样式。 接下来，使用CSS的伪类选择器:after来创建一个伪元素。我们可以将其设置为一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值