html表单验证气泡展示,表单验证-气泡提示.html

.container{

padding: 20px;

position: relative;

}

label::after{

content: "*";

color: red;

}

.mgr-top{

margin-top: 30px;

}

/* 气泡 */

.popTip{

position: absolute;

z-index: 99;

padding: 0 20px;

display: inline-block;

}

.tag{

display: flex;

justify-content: center;

align-items: center;

border:1px solid #B6B7B9;

position:relative;

background-color:#FFF;

border-radius: 4px;

padding: 5px 10px;

}

.tag:before,.tag:after{

content:"";

display:block;

border-width:10px;

position:absolute;

top:-20px;

left:20px;

border-style:solid dashed dashed;

border-color:transparent transparent #B6B7