hint实现多种文字悬浮提示框效果代码
代码语言:html
所属分类:悬停
代码描述:hint实现多种文字悬浮提示框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> .content { padding: 50px ; color: #777; } .content a { color: #444; } .content h3 { text-transform: uppercase; font-size: 0.8em; margin: 22px 0 0; padding: 4px 0; background: rgba(00, 0, 0, 0.02); color: rgba(0, 0, 0, 0.9); border-bottom: 1px solid rgba(0, 0, 0, 0.04); } pre { color: currentColor; font-size: 1.5em; overflow-x: scroll; } a svg { fill: rgba(255, 255, 255, 0.6); } a:hover svg { fill: white; } .social-wrap { position: fixed; /*z-index:2;*/ right: 20px; top: 20px; } </style> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/hint.2.7.0.css"> </head> <body> Hello Sir, <span class="hint--bottom" aria-label="Thank you!">hover over me.</span> <div class="content"> <div class="position-grid"> <div class="position-grid__cell"><a href="javascript:void(0)" aria-label="bottom-right" class="hint--bottom-right">bottom-right</a></div> <div class="position-grid__cell"><a href="javascript:void(0)" aria-label="bottom" class="hint--bottom">bottom</a></div> <div class="position-grid__cell"><a href="javascript:void(0)" aria-label="bottom-left" class="hint--bottom-left">bottom-left</a></div> <div class="position-grid__cell"><a href="javascript:void(0)" aria-label="right" class="hint--right">right</a></div> <div class="position-grid__cell"><a>.</a></div> <div class="position-grid__cell"><a href="javascript:void(0)" aria-label="left" class="hint--left">left</a></div> <div class="position-grid__cell"><a href="javascript:void(0)" aria-label="top-right" class="hint--top-right">top-right</a></div> <div class="position-grid__cell"><a href="javascript:void(0)" aria-label="top" class="hint--top">top</a></div> <div class="position-grid__cell"><a href="javascript:void(0)" aria-label="top-left" class="hint--top-left">top-left</a></div> </div> <h3>Color Modifiers</h3> <p> <a class="status-icon hint--bottom-right hint--error" style="background:indianred" aria-label="This is an error tooltip"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#ffffff" d="M8.27,3L3,8.27V15.73L8.27,21H15.73L21,15.73V8.27L15.73,3M8.41,7L12,10.59L15.59,7L17,8.41L13.41,12L17,15.59L15.59,17L12,13.41L8.41,1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0