Question

我将我的Angle 7项目侧边栏添加到了Tooltip，但是它不起作用任何人都知道如何正确添加

谢谢

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

Demo for tooltip integration

可以添加如下：

<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 2

以这种方式编辑代码，以将角度材料工具提示集成到侧边栏中。您可以通过Angular material tooltip documentation for more details。

  <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 3

sidebar.component.html

在定位标记中

添加 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>

Answer 4

您只需添加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>

角侧栏添加工具提示不起作用

4 个答案: