未显示 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组件中，你还需要记得传递给Tooltip组件，这个变量的内容是从AppComponent接收到的。

请参阅working example here。