利用css和＜span＞标签实现tooltips

最新推荐文章于 2024-08-12 22:06:26 发布

菠萝mire

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量563

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Julienling/article/details/115862728

版权

css

.ChkBxTooltip {
    color: red;
    
    position: relative;
    z-index: 1;
}

.ChkBxTooltip span {
    display: none;
}

.ChkBxTooltip:hover {
    z-index: 2;
}

.ChkBxTooltip:hover span {
	margin-top: 4px;
    display: block;
    position:absolute;
	top:25px;
	left:-10px;
	border-radius:6px;
	border:2px solid white;
	width:200px;
	text-align:center;
	padding: 5px;
	color:white;
	background-color: black;
	font-size:11px;
	text-decoration: none;
	box-shadow: 6px 0px 6px  red;

}

.ChkBxTooltip span:after{
	content: "";
	position: absolute;
	bottom: 100%;
	left:20%;
	margin-left: -8px;
	width:0;
	height:0;
	border-bottom: 6px solid #000000;
	border-right: 6px solid transparent;
	border-left:6px solid transparent;
/*	transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
*/
}

html

<body>
    <fieldset>
        <legend class="ChkBxTooltip" ><strong>paraCheckbox</strong><span>请在该复选框中勾选所需参数</span></legend>
        <form id="paraFrm" method="post" action="">
            <input type="checkbox" id="paraSlctAll"><strong>select all / unselected all</strong>
            <br>
            <input type="checkbox" name="paraCheckbox" value="checkbox1">WIND
            <input type="checkbox" name="paraCheckbox" value="checkbox2">WDIR
            <input type="checkbox" name="paraCheckbox" value="checkbox3">SWELL
            <input type="checkbox" name="paraCheckbox" value="checkbox4">SWPER
            <br>
            <!-- 在onclick事件中调用js函数 -->
            <button type="submit" value="提交" onsubmit="paraChk()">submit</button>
            <button type="reset" value="重置" onreset="paraClr()">reset</button>
        </form>
    </fieldset>
    <br>
    <!-- 	相似性准则smilarity criteria复选框   -->
    <fieldset>
        <legend  class="ChkBxTooltip" ><strong>smlCheckbox</strong><span>请在该复选框中勾选相似性准则</span></legend>
        <form id="smlFrm" method="post" action="">
            <input type="checkbox" id="smlSlctAll"><strong>select all / unselected all</strong>
            <br>
            <input type="checkbox" name="smlCheckbox" value="checkbox8">spatial overlap
            <input type="checkbox" name="smlCheckbox" value="checkbox5">max
            <input type="checkbox" name="smlCheckbox" value="checkbox6">min
            <input type="checkbox" name="smlCheckbox" value="checkbox7">stdev
            <input type="checkbox" name="smlCheckbox" value="checkbox8">mean
            <br>
            <button type="submit" value="提交" onsubmit="smlChk()">submit</button>
            <button type="reset" value="重置" onreset="smlClr()">reset</button>
        </form>
    </fieldset>
    <br>
    <br>
    <select onchange="">
        <option value="">---请选择时刻---</option>
        <optgroup label="time"></optgroup>
        <option value="one">d100</option>
        <option value="two">d106</option>
        <option value="three">d112</option>
        <option value="four">d118</option>
        <option value="five">d200</option>
    </select>
</body>

效果图

在这里插入图片描述

菠萝mire

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用css和＜span＞标签实现tooltips

css.ChkBxTooltip { color: red; position: relative; z-index: 1;}.ChkBxTooltip span { display: none;}.ChkBxTooltip:hover { z-index: 2;}.ChkBxTooltip:hover span { margin-top: 4px; display: block; position:absolute;
复制链接

扫一扫