带三角形的顶部提示框(popover)组件示例程序
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>三十客-带三角形的顶部提示框(popover)组件</title> <style> .pop-wrapper { padding: 16px 10px; margin : 70px 0 0 20px; background-color: #02bdda; border-radius: 6px; color: #e3fbff; width: 200px; position: relative; text-align: center; cursor: pointer; } .popover { background-color: rgba(0, 0, 0, 0.85); border-radius: 5px; bottom: 64px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); color: #fff; display: none; font-size: 12px; left: 0; padding: 7px 10px; position: absolute; width: 200px; z-index: 4; } .popover:before { border-top: 7px solid rgba(0, 0, 0, 0.85); border-right: 7px solid transparent; border-left: 7px solid transparent; bottom: -7px; content: ''; display: block; left: 50%; margin-left: -7px; position: absolute; } .pop-wrapper:hover .popover { display: block; } </style> </head> <body> <div class="pop-wrapper">顶部提示框 <span class="popover">简单是稳定的前提。</span></div> <h2>移动鼠标到按钮上查看演示效果</h2> </body> </html>