如何实现hover提示文本在input文本输入框旁对齐显示？

问题根因 #

Bootstrap 自带的.form-control类默认是100%宽度的块级元素，会独占整行空间，因此紧跟在input后的提示span会被挤压到下一行展示。

解决方案 #

方案1：使用Bootstrap内置弹性布局类（改造成本最低）

直接给包裹input和提示span的父级col-md-6容器添加flex相关的工具类即可，修改后的HTML对应部分如下：

<div class="col-md-6 d-flex align-items-center gap-2">
  <form:input type="text" class="form-control" path="userName" id="userName" maxlength="100" />
  <span id="typePrompt">Allow only letters</span>
</div>

如果你的Bootstrap版本不支持gap-2工具类，给#typePrompt加个左边距即可：

span#typePrompt {
  display: none;
  margin-left: 8px;
}

方案2：自定义CSS调整input宽度

不想修改HTML结构的话，直接给input调整为行内块级、设置非100%宽度即可：

input#userName {
  display: inline-block;
  /* 宽度减去提示文本预留的空间，可根据实际需求调整 */
  width: calc(100% - 100px);
  margin-right: 8px;
}

两种方案均可实现hover/focus时提示文本显示在输入框右侧的效果。

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