Ionic中如何实现悬停错误图标时以tooltip展示校验错误信息

1. 隐藏默认底部错误提示 #

给Bootstrap默认的错误提示类添加全局样式隐藏，避免下方显示错误信息：

.invalid-feedback {
  display: none !important;
}
/* 若需仅针对部分表单生效，可给表单外层加自定义类做范围限制，示例：
.custom-validation-form .invalid-feedback {
  display: none !important;
}
*/

2. 给错误图标绑定Tooltip属性 #

调整表单的DOM结构，将原本要展示在.invalid-feedback中的错误信息，赋值给错误图标的title属性，同时加上Tooltip触发所需的属性：

<div class="input-group has-validation">
  <!-- 输入框 -->
  <input 
    type="text" 
    class="form-control" 
    [class.is-invalid]="yourFormControl.invalid && yourFormControl.touched"
    formControlName="yourFieldName"
  >
  <!-- 错误图标 -->
  <span 
    class="input-group-text error-icon"
    data-bs-toggle="tooltip"
    data-bs-placement="top"
    [title]="getErrorMsg(yourFormControl.errors)" <!-- 替换为你自己的错误信息生成逻辑 -->
    *ngIf="yourFormControl.invalid && yourFormControl.touched"
  >
    ✕ <!-- 替换为你实际使用的错误图标代码 -->
  </span>
</div>

3. Ionic环境中初始化Tooltip #

Ionic单页应用需要在组件DOM渲染完成后，手动初始化Bootstrap Tooltip实例，否则悬停效果不会生效：

// 引入对应版本Bootstrap的Tooltip组件
import { Tooltip } from 'bootstrap';

// Angular环境写在ngAfterViewInit生命周期钩子中，其他框架对应写在DOM渲染完成的回调里
ngAfterViewInit() {
  // 初始化所有Tooltip元素
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
    new Tooltip(el);
  });
}

// 如果有动态新增的表单字段，新增字段渲染完成后重新执行一次上述初始化逻辑即可

• 如果你使用的是Bootstrap 4及更早版本，将所有data-bs-开头的属性替换为data-前缀，同时调整Tooltip的引入路径为对应版本的导出即可。
• 若要调整Tooltip的样式、显示延迟等参数，可以在初始化Tooltip时传入配置项。

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