纯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(提示框)组件的使用方法, ...
随机推荐
- tidyr包--数据处理包
tidyr包的作者是Hadley Wickham.这个包常跟dplyr结合使用.本文将介绍tidyr包中下述四个函数的用法: gather—宽数据转为长数据.类似于reshape2包中的melt函数 ...
- javac命令出现“**.java使用了未经检查或不安全的操作”
Collection col=new ArrayList();引发了“**.java使用了未经检查或不安全的操作”错误, 这是因为JDK1.5中引进了泛型,但是你的ArrayList却没有采用,所有会 ...
- Facebook React.js库 入门实例教程
作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩 ...
- ACM 蛇形填数
蛇形填数 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 在n*n方陈里填入1,2,...,n*n,要求填成蛇形.例如n=4时方陈为:10 11 12 19 16 1 ...
- BZOJ2453维护队列&&BZOJ2120数颜色
2016-05-28 11:20:22 共同的思路: 维护某种颜色上一次在哪里出现pre,可以知道当pre<询问的l时更新答案 块内按照pre排序 修改的时候重新O(n)扫一遍,如果和之前的不一 ...
- mysql 存储过程，搞死人的语法
MySQL 真心不如sqlserver灵活 存储过程注意事项: 1.declare 依次声明 DECLARE MyAccountID VARCHAR (36); DECLARE Balance DEC ...
- HDU 1710 二叉树遍历，输入前、中序求后序
1.HDU 1710 Binary Tree Traversals 2.链接:http://acm.hust.edu.cn/vjudge/problem/33792 3.总结:记录下根结点,再拆分 ...
- flex关于字符串转Boolean .
最近做一项目,输入一个boolean类型的参数,结果一致无法获取正确值,后在网上查找才发现原因如下,转帖保存一个: . "false" as Boolean //flase .&q ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- mac 终端乱码
我系统是英文的 export LANG=en_US.UTF-8export LC_ALL=en_US.UTF-8 中文的 export LANG=zh_CN.UTF-8 export LANG=en_ ...