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