带有文本占位符和图标的角度自定义文本框

Question

嗨，我想创建一个自定义文本框，其中需要文本占位符和帮助图标，该图标应该弹出信息

在输入内容时，文本框应如下图所示。

我检查内置输入框的bootstrap和primeng。没找到。

请注意它应该是响应性的。任何帮助深表感谢。

Answer 1

您可以使用ngx bootstrap进行操作，并且仅将工具提示模块导入模块中。

https://valor-software.com/ngx-bootstrap/#/tooltip

import {TooltipModule} from 'ngx-bootstrap';

您可以使用材质图标添加图标。那里的“帮助”图标看上去与您的示例完全相同：

https://material.io/tools/icons/?style=outline

  <mat-form-field>
    <input matInput placeholder="Tracking number">
    <mat-icon matSuffix tooltip="You can enter your...">help</mat-icon>
  </mat-form-field>

您也可以在角度文档中查看：

https://material.angular.io/components/input/examples