jquery实现标签悬浮标注效果代码-html代码-BFW代码库

jquery实现标签悬浮标注效果代码

代码语言：html

所属分类：其他

代码描述：jquery实现标签悬浮标注效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

<style>
html,body {
	width:100%;
	height:100%;
	overflow:hidden;
	margin:0;
	padding:0;
	font-family:NotoSansJP,Slack-Lato,appleLogo,sans-serif
}
.wrapper {
	width:100%;
	height:100%;
	background-color:#808080
}
.wrapper::after {
	content:".";
	display:block;
	height:0;
	font-size:0;
	clear:both;
	visibility:hidden
}
.menu-wrapper {
	box-sizing:border-box;
	float:left;
	width:18vw;
	height:100%;
	overflow-y:scroll
}
.menu {
	box-sizing:border-box;
	list-style:none;
	width:100%;
	margin:0;
	padding:10px;
	font-size:1.1vw
}
.menu>li {
	box-sizing:border-box;
	width:100%;
	height:100%;
	margin:0;
	padding:0
}
.menu>li+li {
	margin-top:10px
}
.menu>li>a {
	box-sizing:border-box;
	display:inline-block;
	width:100%;
	height:100%;
	line-height：1.5em;
	padding:5px 10px;
	text-decoration:none;
	background-color:#40AAEF;
	color:#FFF;
	border-radius:4px;
	box-shadow:0 4px 0 rgba(0,0,0,0.7);
	transition:.2s all ease 0s
}
.menu>li>a.selected {
	background-color:#0E7AC4;
	box-shadow:none;
	transform:translate3d(0,3px,0)
}
.container {
	position:relative;
	float:left;
	width:calc(100% - 18vw);
	height:100%
}
.tooltip {
	display:none;
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	font-size:1.1vw;
	line-height:1.8em;
	color:#FFF
}
.tooltip>dt {
	margin:0;
	padding:0 .5em;
	background-color:#16A085
}
.tooltip>dd {
	margin:0;
	padding:0 .5em 0 2em;
	background-color:#1ABC9C
}
.tooltip>dd+dd {
	border-top:solid 1px #16A085
}

</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="wrapper">
        <div class="menu-wrapper">
            <ul id="jsi-category-container" class="menu">
                <li><a href="1">metadata content</a></li>
                <li><a href="2">flow content</a></li>
                <li><a href="3">sectioning content</a></li>
                <li><a href="4">heading content</a></li>
                <li><a href="5">phrasing content</a></li>
                <li><a href="6">embedded content</a></li>
                <li><a href="7">interactive content</a></li>
                <li><a href="8">palpable content</a></li>
                <li><a href="9">sectioning root</a></li>
                <li><a href="10">form-associated elements</a></li>
                <li><a href="11">listed elements</a></li>
                <li><a href="12">submittable elements</a></li>
                <li><a href="13">resettable elements</a></li>
                <li><a href="14">labelable elements</a></li>
                <li><a href="15">reassociateable elements</a></li>
                <li><a href="16">script-supporting elements</a></li>
            </ul>
        </div>
        <div id="jsi-elements-container" class="container">
            <dl id="jsi-tooltip-container" class="tooltip"><dt>categories</dt>
                <dd class="jsc-tip-category"></dd>
                <dd class="jsc-tip-category"></dd>
                <dd class="jsc-tip-category"></dd>
                <dd class="jsc-tip-category"></dd>
                <dd class="jsc-tip-category"></dd>
                <dd class="jsc-tip-category"></dd>
                <dd class="jsc-tip-category"></dd>
                <dd class="jsc-tip-category"></dd>
                <dd class="jsc-tip-category"></dd>
                <dd class="jsc-tip-category"></dd><dt>content models</dt>
                <dd class="jsc-tip-contents-model"></dd>
                <dd class="jsc-tip-contents-model"></dd>
                <dd class="jsc-tip-contents-model"></dd>
                <dd class="jsc-tip-contents-model"></dd>
                <dd class="jsc-tip-contents-model"></dd>
                <dd class="jsc-tip-contents-model"></dd>
                <dd class="jsc-tip-contents-model"></dd>
                <dd class="jsc-tip-contents-model"></dd>
                <dd class="jsc-tip-contents-model"></dd>
                <dd class="jsc-tip-contents-model"></dd>
            </dl>
        </div>
    </div>
    <!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
var RENDERER = {
    PADDING: 0.05,
    init: function(a, b) {
        this.setParameters(a);
        this.reconstructMethods();
        t.........完整代码请登录后点击上方下载按钮下载查看