ShankyTiwari / ng-material-multilevel-menu

:page_facing_up: Material Multi-Level Menu for Angular Projects
http://plugins.codershood.info/#/plugins/ngmm-plugin
MIT License
98 stars 55 forks source link

How to add tooltip for manu items #185

Closed gowtham-gb closed 3 years ago

gowtham-gb commented 3 years ago

Thanks a lot for the awesome multimedia library. I am able to achieve all requirements except 1. How can we add a tooltip for each menu item? Please find the reference screenshot below, Picture1

gowtham-gb commented 3 years ago

I am able to achieve a tooltip by using a custom template. Here is the code

     <ng-template #listTemplate let-item="item" let-configuration="configuration">
         <div class="app-menu-item" [dir]="configuration.rtlLayout  ? 'rtl' : 'ltr'">
             <div class="title-and-image">
                 <div class="icon-container">
                     <span [ngClass]="getClass(item)" class="icon"></span>
                 </div>
                 <div class="label-container"  [matTooltip]="item.title"
                 matTooltipClass="nav-tooltip" matTooltipPosition="right">
                     <span class="label">{{item.label}}</span>
                 </div>
             </div>
             <div class="icon-arrow-container" *ngIf='item.hasChilden'>
                 <mat-icon *ngIf="!configuration.rtlLayout" [@ExpandedLTR]="item.expanded ? 'yes' : 'no'">
                     keyboard_arrow_down
                 </mat-icon>
             </div>
         </div>
     </ng-template>
 </ng-material-multilevel-menu>