纯CSS实现tooltip提示框，CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状！
首先介绍一下CSS：after选择器
定义和用法：(参考w3school:after选择器)
：after选择器在被选元素的内容后面插入内容，使用content属性来指定要插入的内容
例：
p:after
{
content:"台词：-";
background-color:yellow;
color:red;
font-weight:bold;
}
具体大家可以参考：w3school！
下面来介绍用:after选择器来制作CSS箭头等提示框：（这里将一步一步简单的设计，每一步添加的内容就是与前一步多出来的style代码内容，注意区别！）
首先，我们的HTML代码：
<body>
<div class="demo"></div>
</body>
让我们来设置该盒子的样式：
<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
</style>
截图：
这里需注意我们设置position属性为relative，是为了允许我们设置我们的“箭头”（还没有出现）绝对定位并且保持它和我们的盒子有联系！
接着我们继续插入“箭头”（还没有出现）基本样式：
<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:'';
position:absolute;
height:20px;
width:20px;
background:yellow;
}
</style>
截图：
你将会注意到一些事，一、我们仅仅插入了一个黄色的方块，那个就是我们将要设计成箭头的方块；二、我们设置绝对定位absolute以至于我们可以将它移动到我们想要的位置上！
继续，这儿给黄色方块（即“箭头”前身）设置边框，这儿的边框就是箭头的实体，并且去掉黄色方块的内容（通过设置.demo:after中的样式“height:0;width:0”去掉黄色方块，这里我们省略了黄色方块的height、width）：
<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:'';
position:absolute;
//height:20px;
//width:20px;
background:yellow; border:10px solid gray;
}
</style>
截图：
现在再将灰色边框方块设计成箭头形式：
<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:'';
position:absolute;
//height:20px;
//width:20px;
//background:yellow; //border:10px solid gray;
border:10px solid transparent;
border-top-color:gray
}
</style>
截图：
OK！我们可以看到箭头成形！
下面来设置它的位置为我们想要的（此例箭头移动至下端）：
<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:'';
position:absolute;
//height:20px;
//width:20px;
//background:yellow; //border:10px solid gray;
border:10px solid transparent;
border-top-color:gray; top:100%;
left:10px;
}
</style>
截图：
到这里基本上完事了
下面整体样式设计下（其实就更改了盒子的背景色与箭头颜色相同）：
<style>
.demo{
background-color: gray;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:'';
position:absolute;
//height:20px;
//width:20px;
//background:yellow; //border:10px solid gray;
border:10px solid transparent;
border-top-color:gray; top:100%;
left:10px;
}
</style>
截图：
具体需要什么样的样式可以自行设置了！例如将箭头移动到其他三边可以设置border-T\R\B\L-color:gray;和TRBL(TRBL是指top\right\bottom\left)即可！
当然要修改箭头在盒子边框上的位置时，还需注意：边框border的大小不包含在自身盒子尺寸内！所以设计时需要注意margin的影响，比如箭头在下边框中居中，我们考虑上面的同时还需添加：“ margin-left:-10px; ”才可居中！
结论来自yy浮萍人生的评论（简洁形象~~哈哈~~）：
此例设计原理：设置伪类选择器盒子的宽度和高度为0,那边border形成的区域是[X]这个样子的，其他三边透明了，所以呢就显示了个三角形！
（本文参考：YUI Team:CSS Quick Tip: CSS Arrows and Shapes Without Markup）
更多知识分享：微笑空间站
纯CSS实现tooltip提示框，CSS箭头及形状的更多相关文章
- 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- echarts 更改tooltip提示框CSS样式
最近 做项目,用过echarts,发现tooltip提示z-index级别很高,想更改下,看了下文档:https://www.echartsjs.com/zh/option.html#tooltip. ...
- css兼容tooltip提示框方法
最终效果图: 基本原理 先设定一个背景色的普通div盒子,然后使用上篇post得到的三角型图标,把div盒子设置为相对定位模式,三角型图标设置为绝对定位,位置相对于div盒子,调整到合适的位置.这样就 ...
- 使用css实现全兼容tooltip提示框
在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终 ...
- 纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...
- CSS3实现Tooltip提示框飞入飞出动画
原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...
- tooltip提示框组件
Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含 ...
- 原生js实现tooltip提示框的效果
在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的 ...
- 第一百九十六节，jQuery EasyUI，Tooltip(提示框)组件
jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...
随机推荐
- The Parallel Challenge Ballgame[HDU1101]
The Parallel Challenge Ballgame Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ( ...
- ajax请求 json格式和数组格式总结
php echo json_encode($data); $.ajax({ url:APP+"?a=total&c=collection", //请求的页面 type:&q ...
- ubuntu server下建立分区表/分区/格式化/自动挂载（转）
link:http://www.thxopen.com/linux/2014/03/30/Linux_parted.html 流程为:新建分区-->格式化分区-->挂载分区 首先弄明白分区 ...
- 关于c语言模拟c++的多态
关于c++多态,个人认为就是父类调用子类的方法,c++多态的实现主要通过虚函数实现,如果类中含有虚函数,就会出现虚函数表,具体c++多态可以参考<深度探索c++对象模型> c语言模拟多态主 ...
- 应用程序间跳转 (友盟SSO 授权 与系统自带的分享)
应用程序间跳转的应用场景 使用第三方用户登录,如微信登录,返回用户名和密码 需要用户授权,返回到调用程序,同时返回授权的用户名 应用程序推广,跳转到itunes并显示指定app下载页 第三方支付,跳转 ...
- NOI模拟赛Day3
终于A题啦鼓掌~开心~ 开考看完题后,觉得第二题很好捏(傻叉上线 搞到十一点准备弃疗了然后突然发现我会做第一题 于是瞎码了码,就去准备饭票了... 好了,停止扯淡(就我一个我妹子每天不说话好难受QAQ ...
- 纪念逝去的岁月——C/C++字符串回文
判断字符串是否是回文: 1. 输入:hello world dlrow olleh 输出:1 2. 输入:nihao hello 输出:0 代码 #include <stdio.h> #i ...
- js通过sessionStorage实现的返回上一页
通常,我们都会使用比较熟悉的javascript:history.go(-1)来实现返回上一页,此种方法有一个问题就是返回上一页后不能刷新当前页面,给我们的开发带来了一定的不便,显然有时这种方法就不是 ...
- Js文字特效—文字段逐个变色循环
自己用来练习的,附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友,推荐先系统了解Javascript中Html Dom Object部分的内容,包括常用方法及属性. <!DOCTY ...
- Daily Scrum 10.25
今天我们在分析数据库的时候发现还有一些这方面知识上的不足,花费一些额外的时间做功课.这说明当时我们的plan没有做好,但是我们基本还处在进度上. 下面是今天的Task统计: