primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
9.83k stars 4.5k forks source link

TabMenu: Tooltip does not work using tooltip field #15517

Open godfryd opened 1 month ago

godfryd commented 1 month ago

Describe the bug

Setting tooltip field is not working, no tooltip is displayed. The same applies to title field but there is a bug for that: https://github.com/primefaces/primeng/issues/15500

Environment

    "@angular/animations": "17.0.8",
    "@angular/cdk": "17.0.4",
    "@angular/common": "17.0.8",
    "@angular/compiler": "17.0.8",
    "@angular/core": "17.0.8",
    "@angular/fire": "17.0.0",
    "@angular/forms": "17.0.8",
    "@angular/language-service": "17.0.8",
    "@angular/localize": "17.0.8",
    "@angular/platform-browser": "17.0.8",
    "@angular/platform-browser-dynamic": "17.0.8",
    "@angular/router": "17.0.8",
    "@angular/service-worker": "17.0.8",
    "primeflex": "3.3.1",
    "primeicons": "7.0.0",
    "primeng": "17.15.0",

Reproducer

No response

Angular version

17.0.8

PrimeNG version

17.15.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

No response

Steps to reproduce the behavior

Pick any example of tabmenu from the docs and add tooltip field to tab items list.

Expected behavior

Tooltip is displayed.

Sinan997 commented 1 month ago

Hi, could you use tooltipOptions object and set tooltipLabel?

Example Usage

this.items = [
  { label: 'Homee', icon: 'pi pi-fw pi-home', tooltipOptions: { tooltipLabel:'Test123' }},
  { label: 'Calendar', icon: 'pi pi-fw pi-calendar', tooltipOptions: { tooltipLabel:'Calendar' }},
  { label: 'Edit', icon: 'pi pi-fw pi-pencil', tooltipOptions: { tooltipLabel: 'Edit' }},
  {
    label: 'Documentation',
    icon: 'pi pi-fw pi-file',
    tooltipOptions: { tooltipLabel: 'Documentation' }
  },
  { label: 'Settings', icon: 'pi pi-fw pi-cog', tooltipOptions: { tooltipLabel: 'Settingsl' }},
];