html部分
<div class="bubble show">
<div class="arrow-down"></div>
<p style="display: flex; align-items: center;"><svg t="1687242464305" class="icon"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2231" width="32" height="32">
<path
d="M512 32C246.912 32 32 246.912 32 512c0 265.088 214.912 480 480 480 265.088 0 480-214.912 480-480 0-265.088-214.912-480-480-480z m0 896C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416z"
p-id="2232" fill="#d81e06"></path>
<path
d="M512 384a32 32 0 0 0-32 32v352a32 32 0 0 0 64 0V416a32 32 0 0 0-32-32z"
p-id="2233" fill="#d81e06"></path>
<path d="M512 272m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="2234"
fill="#d81e06"></path>
</svg>
此问题必须填写</p>
</div>
js部分
const inputs = document.querySelectorAll('.form-group input[type="text"]');
const bubble = document.querySelector('.bubble')
inputs.forEach(input => {
input.addEventListener('blur', function() {
const siblingBubble = this.parentNode.querySelector('.bubble');
if (this.value === '') {
if (!this.classList.contains('not')) {
this.classList.add('invalid');
if (siblingBubble) {
siblingBubble.classList.remove('show');
}
}
} else {
this.classList.remove('invalid');
if (siblingBubble) {
siblingBubble.classList.add('show');
}
}
});
});
css部分
.bubble {
position: absolute;
background-color: rgb(255,255,255);
border-radius: 8px;
width: 260px;
height: 60px;
margin-left:54%;
box-shadow: 0 8px 12px 0 rgba(0,0,0,.12);
border: 2px solid rgba(0,0,0,.11);
border-radius: 12px;
font-weight: 500;
align-items: center;
padding: 8px 20px;
display: inline-flex;
-webkit-box-align: center;
font-size: 30px;
}
.show{
display: none;
}
.arrow-down {
position: absolute;
width: 0px;
height: 0px;
top: 70px;
left: 70%;
transform: translateX(-50%);
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgb(255, 255, 255);
}
标签:bubble,solid,classList,焦距,表单,siblingBubble,提示框,border,255
From: https://www.cnblogs.com/xxdmua/p/17496106.html