Antd / Angular Tooltip не отображается

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.

Смотрите рабочий пример здесь .