CODEWITHSUNDEEP
angularangular-materialtooltip
Helme2
Helme2

Reputation: 11

Mat tooltip not working inside of material list-item

My mat tooltip is not showing inside of my mat-list-item. I have done the following:

  1. Added MatTooltipModule & BrowserAnimationsModule
  2. Tried making a class to put the tooltip in front of other elements.

This is the code:

<mat-accordion mat-list-option>
  <mat-expansion-panel [togglePosition]="'before'">
    <mat-expansion-panel-header>
      <mat-icon [svgIcon]="'heroicons_outline:user-group'"></mat-icon>
      <mat-panel-title>Channel members</mat-panel-title>
    </mat-expansion-panel-header>
    <mat-nav-list>
      <mat-list-item *ngFor="let users of currentUsers" mat-menu-item>
        <mat-icon
          class="items-begin relative"
          [svgIcon]="'heroicons_outline:user'"
          ><span
            class="absolute left-5 bottom-4 h-2 w-2 rounded-full"
            matTooltip="Show something!"
            matTooltipPosition="left"
            [ngClass]="{
              'bg-green-500': users.data.status === 'active',
              'bg-amber-500': users.data.status === 'pending',
              'bg-red-500': users.data.status === 'rejected'
            }"
          ></span
        ></mat-icon>
        {{ users.data.displayName }}
      </mat-list-item>
    </mat-nav-list>
  </mat-expansion-panel>
</mat-accordion>

Does someone know how to fix this issue?

Upvotes: 1

Views: 1157

Answers (1)

Rhett Harrison
Rhett Harrison

Reputation: 432

Hey welcome to Stack Overflow!

I think I at least got you closer to a solution. I believe your issue was just mismatching tags and attributes. I changed the matMenuItem to a matListItem and I changed mat-nav-list to just a mat-list. I also took out a lot to get a minimum reproducible example going, but I hope this at least gets you to where you need to be to finish it up!

I have the template and component files here for you, but I also encourage you to check out this stackblitz that I used to get this solution. I encourage you to fork it and make it how you need it for your specific example

import { Component } from '@angular/core';
import { TooltipPosition } from '@angular/material';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'basictooltip',
  templateUrl: 'basictooltip.html',
})
export class BasicTooltip {
  public currentUsers = [
    {
      data: {
        status: 'active',
        displayName: 'Ricky Bobby',
      },
    },
    {
      data: {
        status: 'active',
        displayName: 'Ricky Bobby',
      },
    },
    {
      data: {
        status: 'active',
        displayName: 'Ricky Bobby',
      },
    },
    {
      data: {
        status: 'active',
        displayName: 'Ricky Bobby',
      },
    },
  ];
}

<mat-accordion mat-list-option>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-icon></mat-icon>
      <mat-panel-title>Channel members</mat-panel-title>
    </mat-expansion-panel-header>
    <mat-list>
      <mat-list-item
        *ngFor="let users of currentUsers"
        matListItem
        class="absolute left-5 bottom-4 h-2 w-2 rounded-full"
        matTooltip="Show something!"
        matTooltipPosition="above"
      >
        {{ users.data.displayName }}
      </mat-list-item>
    </mat-list>
  </mat-expansion-panel>
</mat-accordion>

As promised, here is the stackblitz to go to play with this and make it how you need https://angular-tooltip-material-6synxp.stackblitz.io

Upvotes: 0

Related Questions