Antd/Angular Tooltip not displayed

user_12221340 0
Viewed 3368

I'm new to Angular and Antd, and am trying to implement a simple tooltip on an antd icon. The code looks right, based on the example given at https://ng.ant.design/components/tooltip/en, and while I do get the icon as expected, hovering over it does not display the tooltip.

In my app.module.ts file:

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

in my declarations array:

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

and in my imports array:

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

Finally, here is my 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";
}

I'm declaring ttContent as an input so that I can pass it as a parameter in the markup of a parent component. Other than that last bit, this is pretty much verbatim from the antd site example.

I do get the icon rendered to the screen, and if I hover over it while looking at dev tools, I see the class 'ant-tooltip-open' get applied. But no tooltip. I assume there's something basic I'm missing, but have been poking for hours and can't see what that might be. Anyone got some help for me?

antd angular
1 Answers

nzTooltipTitle is an input for the component used by the library you are using.

For this reason, it must be rounded by square parenthesis [nzTooltipTitle] and without the single quote for the variable you are passing.

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

In the DefaultInput component, you also need to remember to pass to the Tooltip component, the variable with the content received from the AppComponent.

See the working example here.

user_22750110
Related