Ng-zorro-antd: Tooltip with dropdown

Created on 21 Jul 2019 · 3Comments · Source: NG-ZORRO/ng-zorro-antd

Reproduction link

https://stackblitz.com/edit/angular-yasyzp-rpwq9o

Steps to reproduce

What is expected?

split the attributes for every Component

What is actually happening?

Because Tooltip and Dropdown work with the same attributes I have problem to make tooltip on hover and dropdown by click.

| Environment | Info |
|---|---|
| ng-zorro-antd | 8.1.0 |
| Browser | FF |

Dropdown 📋 Backlog

Source

rafaelsmith

Most helpful comment

Possible solution

@Component({
  selector: 'nz-demo-dropdown-basic',
  template: `
    <a nz-dropdown #dropdown="nzDropdown" [nzDropdownMenu]="menu" nz-tooltip nzTitle="prompt text">
      Hover me
      <i nz-icon nzType="down"></i>
    </a>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
        <li nz-menu-item>1st menu item</li>
        <li nz-menu-item>2nd menu item</li>
        <li nz-menu-item>3rd menu item</li>
      </ul>
    </nz-dropdown-menu>
  `
})
export class NzDemoDropdownBasicComponent implements OnInit {
  @ViewChild('dropdown', { static: true })
  dropDown: NzDropDownDirective;

  ngOnInit(): void {
    this.dropDown.nzTrigger = 'click';
  }
}

Notice the #dropdown="nzDropdown", as the NzDropDownDirective uses exportAs.

lppedd on 22 Jul 2019

👍4 🎉1

All 3 comments

Possible solution

@Component({
  selector: 'nz-demo-dropdown-basic',
  template: `
    <a nz-dropdown #dropdown="nzDropdown" [nzDropdownMenu]="menu" nz-tooltip nzTitle="prompt text">
      Hover me
      <i nz-icon nzType="down"></i>
    </a>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
        <li nz-menu-item>1st menu item</li>
        <li nz-menu-item>2nd menu item</li>
        <li nz-menu-item>3rd menu item</li>
      </ul>
    </nz-dropdown-menu>
  `
})
export class NzDemoDropdownBasicComponent implements OnInit {
  @ViewChild('dropdown', { static: true })
  dropDown: NzDropDownDirective;

  ngOnInit(): void {
    this.dropDown.nzTrigger = 'click';
  }
}

Notice the #dropdown="nzDropdown", as the NzDropDownDirective uses exportAs.

lppedd on 22 Jul 2019

👍4 🎉1

Looks similar to #3456