Question

我是Angular和Antd的新手，正在尝试在antd图标上实现简单的工具提示。根据{{3}}给出的示例，代码看起来正确，尽管我确实按预期得到了图标，但是将鼠标悬停在其上不会显示工具提示。

在我的app.module.ts文件中：

...
import { NgZorroAntdModule, NZ_I18N, en_US } from 'ng-zorro-antd';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
...
import { Tooltip } from './form-elements/tooltip.component';
...

在我的声明数组中：

declarations: [
...
    Tooltip,
...
  ],

以及在我的导入数组中：

imports: [
    BrowserModule,
    NgZorroAntdModule,
...
    NzToolTipModule,
...
  ],

最后，这是我的tooltip.component.ts：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'tooltip',
  template: `
    <span nz-tooltip nzTooltipPlacement="top" nzTooltipTitle="'ttContent'">
        <i nz-icon nzType="question-circle"></i>
    </span>
  `,
  styles: [`
    span {
        margin-left:4px;
        margin-right: 4px;
    }
  `]
})
export class Tooltip {
    @Input() ttContent:string = "Here's the tooltip content";
}

我将ttContent声明为输入，以便可以将其作为参数传递给父组件的标记。除了最后一点，这完全是来自antd网站示例的逐字记录。

我确实将图标渲染到了屏幕上，如果我在查看开发工具时将鼠标悬停在该图标上，则会看到应用了“ ant-tooltip-open”类。但是没有工具提示。我认为我缺少一些基本的东西，但是已经玩了好几个小时了，看不到可能是什么。有人帮我些忙吗？

Answer 1

nzTooltipTitle是您正在使用的库使用的组件的输入。

由于这个原因，必须用方括号[nzTooltipTitle]进行四舍五入，并且您传递的变量必须没有单引号。

<span nz-tooltip nzTooltipPlacement="top" [nzTooltipTitle]="ttContent">
    <i nz-icon nzType="question-circle"></i>
</span>

在DefaultInput组件中，您还需要记住将具有从Tooltip接收到的内容的变量传递到AppComponent组件。

请参见working example here。

不显示Antd / Angular工具提示

1 个答案: