纯css实现漂亮又健壮的tooltip的方法 div+css样式自制带小三角的tooltips效果CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)纯CSS3实现自定义Tooltip边框涂鸦风格的教程用简单的jquery+CSS创建自定义的a标签title提示tooltip关于CSS Tooltips(鼠标经过时显示)的效果怎么用纯CSS制作带小三角的tooltip提示框

button

鼠标移动到这提示文本

 .btn { width: 100px; position: relative; display: inline-block; background-color: gold; padding: 5px; cursor: pointer; } .btn .tip { display: none; width: 100px; background-color: black; color: #fff; text-align: center; padding: 5px 0; font-size: 12px; /* 垂直居中 */ position: absolute; top: 50%; transform: translateY(-50%); left: 118px; z-index: 1; } .btn:hover .tip { display: block; } 

鼠标移动到这

 .btn { position: relative; display: block; margin: 100px auto; padding: 10px; font-size: 14px; background: #fff; color: green; border: 1px solid green; cursor: pointer; } [tip]:after { content: attr(tip); visibility: hidden; /* 实现垂直居中 */ position: absolute; top: 50%; transform: translate(-5px, -50%); transition: all .3s; left: 100%; opacity: 0; /* 空白问题 */ white-space: pre; font-size: 16px; padding: 5px 10px; background-color: rgba(18,26,44,0.8); color: #fff; box-shadow: 1px 1px 14px rgba(0,0,0,0.1) } [tip]:hover { /* ie兼容 */ overflow: visible } .btn:hover:after { opacity: .8; transition: all .3s; transform: translate(5px, -50%); visibility: visible; display: block; }