纯CSS实现tooltip提示框，CSS箭头及形状

最新推荐文章于 2022-12-30 10:43:55 发布
最新推荐文章于 2022-12-30 10:43:55 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： web前端-学习随记 文章标签： CSS CSS设计箭头 tooltip提示框 伪类选择器 after
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012688910/article/details/41824991
版权
本文详细介绍了如何仅使用CSS创建tooltip提示框及其箭头形状。通过CSS的`:after`选择器，逐步展示从创建基础提示框到形成箭头的整个过程，包括设置相对定位、绝对定位、边框以及调整位置等关键步骤。读者可以学习到如何通过调整边框颜色和大小来定制不同方向和位置的箭头。
摘要由CSDN通过智能技术生成

本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状！

首先介绍一下CSS：after选择器

定义和用法：(参考w3school:after选择器)

　　：after选择器在被选元素的内容后面插入内容，使用content属性来指定要插入的内容

例：

p:after
{ 
    content:"台词：-";
    background-color:yellow;
    color:red;
    font-weight:bold;
}

View Code

 具体大家可以参考：w3school！

 

下面来介绍用:after选择器来制作CSS箭头等提示框：（这里将一步一步简单的设计，每一步添加的内容就是与前一步多出来的style代码内容，注意区别！）
首先，我们的HTML代码：

<body>
    <div class="demo"></div>
</body>

View Code

让我们来设置该盒子的样式：

最低0.47元/天 解锁文章
xuyongsky1234
关注
专栏目录
纯css实现（无脚本）Html指令式tooltip文字提示效果
12-10
分析执行流程 鼠标移入节点 检测是该节点是否存在开启实现 tooltip 实现的标识（类名，属性等） 检测主题、位置（类名，属性等） 生成 / 显示气泡 借鉴他人 让我们先来看看 element-ui的tooltip 样式 很明显， 气泡的位置 是通过 javascript脚本 加上去的   不多逼逼，让我们来定几个期望 不用javascript脚本， 纯css 实现 不用添加新元素**（用after、before伪元素）** 不用类名匹配，直接用属性选择器**（[attr]）** 支持默认样式**（标签没定义主题、位置的时候）** 指令式**（直接在标签定义即可，接下来交给css匹配）
【CSS 29】tooltip 工具提示文本 额外信息 visibility position 定位 利用伪元素类空content属性和边框创建箭头 淡入工具提示 opacity从0到1
最新发布
Zane Boy's blogs
07-11 269
tooltip 工具提示文本 额外信息 visibility position 定位 利用伪元素类空content属性和边框创建箭头 淡入工具提示 使用负 60 像素的左外边距属性为了把工具提示与可悬停文本进行居中对齐，该值是工具提示宽度的一半（120/2 = 60）创建在工具提示的指定侧面显示的箭头，在工具提示后添加“空的”内容，并使用伪元素类 ::after 和 content 属性。top: 100% 将箭头放置在工具提示的底部。当用户将鼠标指针移到元素上时，工具提示通常用于提供关于某内容的额外信息
纯css实现tooltip文字浮框
前端三脚猫的博客
05-23 1162
在平时开发中会遇到展示不全的信息或者一个图标，鼠标移入后展示出更详细的内容浮框需求，现在使用的组件库都有这个功能组件，直接引入使用即可。但是有时候项目没有引入组件库，或者无法使用组件的时候，自己可以使用纯css来实现自己的tooltip浮框。 一、全部使用伪类实现 思路 1、 在文字显示的标签内增加浮框的内容 2、 使用伪类：：before设置浮框 3、 使用伪类：：after设置三角形（实现三角形设置元素宽高为0，三个边框颜色透明） 4、 使用定位设置浮框和三角形距离文字标签的距离 5、 给元素设置不同属
在css中设置箭头,使用CSS在工具提示中添加箭头
weixin_33900916的博客
08-03 698
使用CSS，您可以使用：after在工具提示中添加一个小箭头。这样，还可以使用content属性。您可以尝试运行以下代码以在工具提示中添加箭头：示例html>.mytooltip.mytext{visibility:hidden;width:140px;background-color:blue;color:#fff;z-index:1;bottom:100%;left:6...
使用css实现全兼容tooltip提示框
10-25
标题“使用css实现全兼容tooltip提示框”涉及到的知识点包括：纯CSS技术、全兼容性、tooltip提示框的设计与实现。在Web开发中，tooltip是一种常见的交互元素，用于在用户将鼠标悬停在某个元素上时显示额外信息。这种...
纯CSS3实现的带Tooltip提示框的按钮特效源码.zip
11-20
总结来说，这个"纯CSS3实现的带Tooltip提示框的按钮特效源码"是一个很好的学习资源，展示了如何仅用CSS3就能创建交互式UI元素。通过对`:before`, `:after`, `:hover`, `transition`等特性的熟练运用，我们可以创建出...
怎么用纯CSS制作带小三角的tooltip提示框
09-25
总结来说，使用纯CSS来制作带小三角的tooltip提示框，主要依赖CSS字符或者`border`属性来创建三角形效果，并通过相对定位或者绝对定位来控制其在页面中的准确位置。这是一种高效且兼容性好的技术，无需额外的图像或...
纯CSS实现箭头、气泡让提示功能具有三角形图标
09-25
文章的核心知识点是关于如何使用纯CSS创建带三角形指示图标的提示信息（tooltips），主要包括两种实现方式：一种是使用CSS的边框属性来创建三角形箭头，另一种是结合使用CSS的:before和:after伪元素来创建气泡提示中...
css实现toolTip
心痛丶如花败
06-30 1062
css实现toolTip(空心三角箭头
css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
weixin_42429120的博客
08-03 1504
Tooltip 也就是内容的提示信息，合理使用可以给用户比较好的体验。实现方法有很多种，有很多JS 插件，我这里介绍的是纯CSS实现的方法，兼容性也比较靠谱,IE8+均可正常显示。实现方法也非常简单。html结构WordPress Theme Pivot可以看到关键有2点，意识有css-tooltip标签，二是用data-tooltip保存提示信息。css代码.css-tooltip{positi...
纯CSS实现一个漂亮的ToolTips效果（导航栏气泡特效）
AMAZING
11-21 3332
纯CSS实现一个漂亮的ToolTips效果（导航栏气泡特效）
css实现tooltip
weixin_36106791的博客
05-28 1174
想起在群里有位群友问过一道面试题，怎么用css实现tooltip，第一解决方案大家可能是都是用title解决，但是会是这么简单吗？ 面试题考察点 css实现tootip,个人感觉应该考点在于对css的熟悉程度。用title来实现tootip这个是基本上能解决问题的但是样式美化就是一个小问题。我来解决的话第一解决方案就是用伪类，伪元素实现。 伪类 伪元素 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来
Css之 table表格 实现表头滚动固定并且固定最后一列在右侧 (实用、赞）
chelen_jak的专栏
05-14 2994
原文出处：Css之 table表格 实现表头滚动固定并且固定最后一列在右侧_灼灼桃花夭的博客-CSDN博客 固定表头 https://blog.csdn.net/qq_36939013/article/details/108101677 固定最后一列在最右侧 https://blog.csdn.net/weixin_39884872/article/details/117763346 纯css 实现 table固定首行、首列以及最后一列冻结 https://www.cnblogs.com/a87
table中的内容超过2行自动显示Tooltip
weixin_46645338的博客
12-30 1514
当我们在table中的某列内容过多时，会撑开td的高度，导致非常的难看本文介绍的是，当内容超过两行时，超出的部分用 … 代替，并且鼠标悬浮时，会显示出所有的内容但是当内容未超过两行时，鼠标悬浮时不显示Tooltip下面先看效果。
CSS—Tooltip
qq_35574915的博客
09-06 377
两种样式： 样式1：实心tooltip 样式2：空心tooptip 比较全面的分析博客转自：http://www.cnblogs.com/daxiong/articles/3158630.html .tooltip { position: relative; display: inline-block; border-bottom:
CSS 提示工具(Tooltip) 与 CSS绘制三角形和箭头
weixin_44524835的博客
01-06 535
CSS 提示工具(Tooltip) <div> <div class="cssTooltip">CSS 提示工具(Tooltip) <span class="tooltiptext">Tooltip</span> </div> </div> <style scoped lang="scss"> .cssTooltip { cursor: pointer; position:
html 带箭头的提示框,带箭头提示框总结实例
weixin_42699679的博客
06-04 1138
无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框，这种箭头可以通过背景图片或者是css来实现，本文介绍三种通过css实现带箭头的提示框。通过border属性思路：两个三角形，通过定位使两个三角形相差1px作为边框。CSS3 transfrom思路：先做一个两条边相同颜色的正方形，然后旋转一定角度就是三角形了特殊字符'♦'思路：特殊字符漏出上半部分，看上去就像三角形了一、通过border属性...
CSS实现带箭头的提示框及鼠标在按钮与提示框上提示框不隐藏的Javascript的实现
笑梦码侬生
12-27 2926
现在比较流行带三角的提示框，且尤其是在公司网站上下载移动客户端这样的设计。
div+css实现圆形div以及带箭头提示框效果
06-06
要实现带箭头的提示框效果，可以使用 CSS 的伪元素和绝对定位来实现。例如： ```html <div class="tooltip">Hover me <span class="tooltiptext">This is a tooltip ``` ```css .tooltip { position: relative;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值