I have an Angular Material tooltip used to display information when hovering over a columns cells in a table element. On top of this functionality I also require users to be able to select the text and highlight it from the table element so they can copy and paste it.

Because I am using Angular Material tooltip and ::ng-deep to display it over top of the column, it creates an overlay over the existing DOM elements so I can't select the text in the column. Is there anyway around this? Do I have to edit the matToolTip class?

Thanks!

My ultimate solution will be to use a more native tooltip elements that will be part of the DOM and not block users from selecting the text however this isn't as pretty so it's my last resort.

editponent.html

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

<ng-container matColumnDef="DepartmentName">
        <th mat-header-cell *matHeaderCellDef></th>
        <td
          mat-cell
          *matCellDef="let row"
          [matTooltip]="getTooltipMissingDepartments(row)"
          matTooltipClass="missing-mds-tooltip"
        >
          {{ row?.DepartmentName }}
        </td>
      </ng-container>

editponent.scss

::ng-deep .missing-mds-tooltip {
  white-space: pre-line;
}

Users should be able to hover over the column and see a tooltip, as well as highlight the text in the table for that column.

I have an Angular Material tooltip used to display information when hovering over a columns cells in a table element. On top of this functionality I also require users to be able to select the text and highlight it from the table element so they can copy and paste it.

Because I am using Angular Material tooltip and ::ng-deep to display it over top of the column, it creates an overlay over the existing DOM elements so I can't select the text in the column. Is there anyway around this? Do I have to edit the matToolTip class?

Thanks!

My ultimate solution will be to use a more native tooltip elements that will be part of the DOM and not block users from selecting the text however this isn't as pretty so it's my last resort.

edit.ponent.html

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

<ng-container matColumnDef="DepartmentName">
        <th mat-header-cell *matHeaderCellDef></th>
        <td
          mat-cell
          *matCellDef="let row"
          [matTooltip]="getTooltipMissingDepartments(row)"
          matTooltipClass="missing-mds-tooltip"
        >
          {{ row?.DepartmentName }}
        </td>
      </ng-container>

edit.ponent.scss

::ng-deep .missing-mds-tooltip {
  white-space: pre-line;
}

Users should be able to hover over the column and see a tooltip, as well as highlight the text in the table for that column.

• javascript
• angular
• dom
• angular-material
• tooltip

2 Answers 2

To get this working, I added the following provider to my custom NgModule that imports all of the Angular Material ponents I use in my app, which I then import as necessary

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

@NgModule({
  // imports, exports, etc. go here

  providers: [
    {
      provide: MAT_HAMMER_OPTIONS,
      useValue: {
        cssProps: {
          userSelect: true
        }
      },
    },
  ],
})

Looks like there is an open issue about this : https://github./angular/material2/issues/8817

Instead of giving the user the option to copy, You can force copy the text to the clipboard when hover the tool tip automatically by using : ngx-clipboard