hint实现多种文字悬浮提示框效果代码-html代码-BFW代码库

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 h.........完整代码请登录后点击上方下载按钮下载查看