如何将表单错误提示弹窗调整至输入框右侧并修改箭头位置

问题背景 #

• 现有错误弹窗默认显示在表单输入框上方，底部带指向输入框的箭头，会遮挡输入内容
• 目标效果：将弹窗及配套箭头调整到输入框右侧，箭头指向输入框，避免遮挡后续新增的主机名输入项
• 现有实现包含HTML结构、JS显隐逻辑、CSS样式三部分

现有实现代码 #

HTML结构 #

<div class="popup" onclick="myFunction()">
    <span class="popuptext" id="myPopup">{{ error }}</span>
</div>

JS交互逻辑 #

function myFunction() {
  let popupTxt = document.getElementById("myPopup");
  popupTxt.classList.add("hide");
}

原有CSS样式 #

/* 弹窗容器 */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 弹窗本体 */
.popup .popuptext {
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* 弹窗箭头 */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* 弹窗隐藏类 */
.popup .hide {
  visibility: hidden;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* 淡入动画 */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

具体CSS调整方案 #

仅需修改.popup .popuptext和.popup .popuptext::after两个选择器的定位属性，其余代码无需改动：

• 调整弹窗本体定位：移除原有的上下偏移规则，改为垂直居中对齐输入框、水平偏移到容器右侧
• 调整箭头样式：将原朝下的箭头改为朝左，垂直居中贴在弹窗左侧边缘，指向左侧输入框

修改后的对应CSS代码如下：

/* 调整后的弹窗本体 */
.popup .popuptext {
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  /* 替换原bottom、left、margin-left属性 */
  top: 50%;
  left: 125%;
  transform: translateY(-50%);
}

/* 调整后的弹窗箭头 */
.popup .popuptext::after {
  content: "";
  position: absolute;
  /* 替换原top、left、margin-left、border-color属性 */
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #555 transparent transparent;
}

补充说明：原有.hide类的交互逻辑存在小缺陷，当前实现是点击后才添加hide类隐藏弹窗，默认状态弹窗为显示状态，可根据实际表单校验的业务需求调整显隐切换逻辑，该问题不影响本次位置调整的效果。

内容的提问来源于stack exchange，提问作者jamesc