Using Angular Material ToolTip but can't select text on element beneath it

Question

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.component.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.component.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.

Kabb5 Kabb5 · Accepted Answer · 2019-04-05T19:07:41

To get this working, I added the following provider to my custom NgModule that imports all of the Angular Material components 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
        }
      },
    },
  ],
})

Using Angular Material ToolTip but can't select text on element beneath it

2 Answers