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.

score 8 · Answer 1 · answered Apr 05 '19 at 19:07

8

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
        }
      },
    },
  ],
})

answered Apr 05 '19 at 19:07

Kabb5

3,760
2
33
55

Hey, thanks for this. It does seem to work, but I'm not sure if it has any side effects. I have not noticed any when using it in a standard browser-based Angular application but have not used it on mobile or other platforms. – Jason Conville Jul 25 '19 at 22:51
Using `MAT_HAMMER_OPTIONS` is now marked as deprecated: https://github.com/angular/components/blob/master/src/material/core/gestures/gesture-config.ts#L48 – Jan Pospíšil Jan 02 '20 at 09:27
@JanPospíšil - thanks for the update! It looks like it will be dropped in 10.0, so it's still usable (albeit deprecated) until then – Kabb5 Jan 02 '20 at 13:10
@Kabb5 Still wasn't able to find any non deprecated replacement tho... :( – Jan Pospíšil Jan 03 '20 at 15:20

score 0 · Answer 2 · answered Mar 22 '19 at 21:46

0

Looks like there is an open issue about this : https://github.com/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

answered Mar 22 '19 at 21:46

Amit Baranes

7,398
2
31
53

1

So from what I can tell, this open issue is about selecting the actual text on the tooltip, I want to select the text on the tooltip beneath it. On the table element, but the overlay is blocking that element. – Benny Mar 25 '19 at 13:44

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

2 Answers2