使用css实现全兼容tooltip提示框
摘要：最终效果图：基本原理先设定一个背景色的普通div盒子，然后使用上篇post得到的三角型图标，把div盒子设置为相对定位模式，三角型图标设置为...
最终效果图：
基本原理
先设定一个背景色的普通div盒子，然后使用上篇post得到的三角型图标，把div盒子设置为相对定位模式，三角型图标设置为绝对定位，位置相对于div盒子，调整到合适的位置。这样就得到一个基本的tooltip，但是没有边框看起来总是不舒服，我们可以给div盒子设置一个边框，这没什么难度，但是三角形图标如何设置边框呢?这里我们通过一个取巧的方式，让两个不同颜色的三角形图标叠加，并且位置错开1px，这样底层三角形top border被遮盖，只露出左右border部分，叠加在一起我们就得到一个看似带边框的三角形图标。
step by step
1.先定义一个相对定位的盒子div：
<div class="tooltips">
</div>
【使用css实现全兼容tooltip提示框】相关文章：
下一篇：
CSS3动态效果学习笔记
相关阅读
网友关注
网友最新关注视频
- 七年级英语下册 上海牛津版 Unit3
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案，湖北省
- 沪教版牛津小学英语（深圳用） 六年级下册 Unit 7
- 化学九年级下册全册同步 人教版 第18集 常见的酸和碱（二）
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案，辽宁省
- 北师大版数学 四年级下册 第三单元 第二节 小数点搬家
- 化学九年级下册全册同步 人教版 第25集 生活中常见的盐（二）
- 第4章 幂函数、指数函数和对数函数（下）_六 指数方程和对数方程_4.7 简单的指数方程_第一课时(沪教版高一下册)_T1566237
- 小学英语单词
- 北师大版数学四年级下册3.4包装
精品推荐