ANTD/Angular工具提示未显示

Question

我是Angular和Antd的新手，正在尝试在Antd图标上实现一个简单的工具提示。根据https：//ng.ant.design/components/tooltip/en中给出的示例，代码看起来是正确的，虽然我确实得到了预期的图标，但悬停在它上面并不会显示工具提示。

在我的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组件中，还需要记住将包含从AppComponent接收的内容的变量传递给Tooltip组件。

请参阅此处的工作示例。