使用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动态效果学习笔记
相关阅读
网友关注
网友最新关注视频
- 北师大版数学 四年级下册 第三单元 第二节 小数点搬家
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案，辽宁省
- 沪教版牛津小学英语（深圳用） 五年级下册 Unit 10
- 【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案，辽宁省
- 【获奖】科粤版初三九年级化学下册第七章7.3浓稀的表示
- 沪教版牛津小学英语（深圳用） 四年级下册 Unit 7
- 外研版英语七年级下册module3 unit2第二课时
- 《小学数学二年级下册》第二单元测试题讲解
- 第19课 我喜欢的鸟_第一课时(二等奖)(人美杨永善版二年级下册)_T644386
- 苏教版二年级下册数学《认识东、南、西、北》
精品推荐
分类导航