Угловая боковая панель для добавления всплывающей подсказки не работает

Question

Я добавил свою угловую 7 боковую панель проекта в Подсказка , но она не работает любой знает, как правильно добавить это

Спасибо

sidebar.component.html

<ul class="nav">
        <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
            <a class="nav-link" [routerLink]="[menuItem.path]">
           <!--     <i class="material-icons">{{menuItem.icon}}</i>-->
                <p><span><img  src="{{menuItem.image}}" width="17" height="17" style="opacity: 0.5;"></span>&nbsp;{{menuItem.tooltip}}</p>
            </a>
        </li>
</ul>

sidebar.component.ts

    import {Component, OnInit} from '@angular/core';
    import {Router, RouterModule, Routes} from '@angular/router';

    declare const $: any;

    declare interface RouteInfo {
        path: string;
        tooltip: string;
        //icon: string;
        class: string;
        image: string;

       /* isSelected: boolean,
        children: any*/
    }


    export const ROUTES: RouteInfo[] = [
        /*{ path: '/dashboard', tooltip: 'Dashboard',  icon: 'home', class: '' },*/
        {
            path: '/projects', tooltip: 'Projects', image: '/assets/img/Projects.svg', class: '',
        },



                {path: '/applications', tooltip: 'Class',  class: '', image: '/assets/img/img1.svg',},
                {path: '/monitoring', tooltip 'Student',  class: '', image: '/assets/img/img2.svg',},
                {path: '/store', tooltip: 'teacher',  class: '', image: '/assets/img/img3.svg',},







        {path: '/profile', title: 'Profile',  class: '', image: '/assets/img/profile.svg',},
            {path: '/billing', title: 'Billing', class: '',image: '/assets/img/Billing.svg',},



];

App.Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTooltipModule} from '@angular/material/tooltip';

@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTooltipModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Отредактируйте свой код таким образом, чтобы встроить подсказку углового материала в боковую панель. Вы можете просмотреть документацию подсказок Angular Material для получения более подробной информации .

  <ul class="nav">
        <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
            <a class="nav-link" 
               [routerLink]="[menuItem.path]" 
                matTooltip="{{menuItem.tooltip}}"
                aria-label="{{menuItem.tooltip}}">
                <!--<i class="material-icons">{{menuItem.icon}}</i>-->
                <p><span><img  src="{{menuItem.image}}" width="17" height="17" style="opacity: 0.5;"></span></p>
            </a>
        </li>
  </ul>

Answer 2

Демонстрация для интеграции всплывающей подсказки

Его можно добавить следующим образом:

<button mat-raised-button
        matTooltip="Info about the action"
        matTooltipClass="example-tooltip-red1"
        aria-label="Button that displays a tooltip when focused or hovered over">
  Action
</button>

В вашем коде необходимо добавить

import { MatTooltipModule} from '@angular/material';

и сделайте:

@NgModule({
  imports: [
    BrowserModule,
   AppRoutingModule,
   BrowserAnimationsModule,
    MatTooltipModule
  ],

и в html добавьте атрибут ниже

 matTooltip="{{menuItem.tooltip}}"

Answer 3

Вы можете просто добавить атрибут matTooltip, это решит вашу проблему.

matTooltip - Сообщение всплывающей подсказки

matTooltipPosition - Положение всплывающей подсказки

matTooltipShowDelay - Задержка всплывающей подсказки

Ссылка: https://material.angular.io/components/tooltip/overview

<ul class="nav">
    <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-tem">
         <a class="nav-link" [routerLink]="[menuItem.path]" matTooltip="Tooltip Message here" matTooltipPosition="above" [matTooltipShowDelay]="500">
             <p><span><img  src="{{menuItem.image}}" width="17" height="17" style="opacity: 0.5;"></span></p>
         </a>
    </li>
</ul>

Answer 4

sidebar.component.html

add matTooltip = {{menuItem.tooltip}} в теге привязки

 <ul class="nav">
            <li routerLinkActive="active" *ngFor="let menuItem of menuItems" 
class="{{menuItem.class}} nav-item">
                <a class="nav-link" [routerLink]="[menuItem.path]" 
                 matTooltip=>
                    <p><span><img  src="{{menuItem.image}}" width="17" height="17" style="opacity: 0.5;"></span></p>
                </a>
            </li>
    </ul>