如何为Angular Formly下拉元素添加工具提示？

可以实现，但原生Angular Formly并没有在字段props下提供直接的tooltip属性，需要通过自定义模板或扩展组件的方式结合字段配置来实现需求。以下是两种可行的实现方式：

方法一：利用原生title属性+自定义选项模板 #

直接在下拉选项的配置中添加tooltip内容，然后通过自定义Formly选项模板绑定原生title属性实现基础工具提示：

1. 字段配置添加tooltip信息 #

fields = [
  {
    key: 'targetDropdown',
    type: 'select',
    templateOptions: {
      label: '目标下拉框',
      options: [
        { label: '选项A', value: 'valA', tooltip: `标签：选项A，值：valA` },
        { label: '选项B', value: 'valB', tooltip: `标签：选项B，值：valB` },
        { label: '选项C', value: 'valC', tooltip: `标签：选项C，值：valC` },
      ],
    },
  },
];

2. 自定义选项模板 #

在组件模板中覆盖Formly的默认选项模板，将tooltip绑定到选项元素：

<formly-form [form]="form" [fields]="fields" [model]="model">
  <!-- 自定义下拉选项模板 -->
  <ng-template formlyTemplate="option" let-option="option">
    <option [value]="option.value" [title]="option.tooltip">
      {{option.label}}
    </option>
  </ng-template>
</formly-form>

方法二：扩展自定义Select组件（适配第三方Tooltip库） #

如果需要更美观的tooltip样式（比如Angular Material的matTooltip），可以创建自定义Formly Select类型组件：

1. 创建自定义Select组件 #

import { Component } from '@angular/core';
import { FieldType, FieldTypeConfig } from '@ngx-formly/core';

@Component({
  selector: 'formly-tooltip-select',
  template: `
    <select [formControl]="formControl" [formlyAttributes]="field">
      <option 
        *ngFor="let option of to.options" 
        [value]="option.value" 
        [matTooltip]="option.tooltip"
        matTooltipPosition="right"
      >
        {{option.label}}
      </option>
    </select>
  `,
})
export class TooltipSelectType extends FieldType<FieldTypeConfig> {}

2. 注册自定义组件 #

在模块中注册这个自定义Formly类型：

import { NgModule } from '@angular/core';
import { FormlyModule } from '@ngx-formly/core';
import { TooltipSelectType } from './tooltip-select.type';

@NgModule({
  imports: [
    FormlyModule.forRoot({
      types: [
        { name: 'tooltip-select', component: TooltipSelectType },
      ],
    }),
  ],
})
export class AppModule {}

3. 字段配置使用自定义类型 #

fields = [
  {
    key: 'targetDropdown',
    type: 'tooltip-select', // 使用自定义类型
    templateOptions: {
      label: '带Tooltip的下拉框',
      options: [
        { label: '选项A', value: 'valA', tooltip: `标签：选项A，值：valA` },
        { label: '选项B', value: 'valB', tooltip: `标签：选项B，值：valB` },
      ],
    },
  },
];

内容的提问来源于stack exchange，提问作者Akash Gedam Patil