Angular 2-如何在角度垫上给出复制选项

Question

I am using matTooltip to show tooltip in Angular. I am facing two issues -

1) I want to give copy option on matTooltip to copy tooltip text. How to give it.

2) My second issues is since my tooltip text is large or long it is not getting shown completely on the tooltip it is wrapped with three dots at end(eg "Thisistooltip...").

Please guide if anyone faced this same issue.

Answer 1

1- Copy Text

You can use ngxClipboard for copying...

<a 
   ngxClipboard
   (click)="copyToClipboard()"
   [cbContent]="textYouNeedToCopy" />
</a>

Also you need to add FormsModule && ClipboardModule in your app.module.ts:

import { FormsModule } from '../../node_modules/@angular/forms';
import { ClipboardModule } from 'ngx-clipboard';

Add it to the imports too...

2- Show full text

I didn't faced this issue but I found a git issue may be this is useful: https://github.com/angular/material2/issues/3531

It explicitly give css to the tool-tip and here's the css

.mat-tooltip {
    max-width: 50px;
    /* or */
    /* width: 50px; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}