Currently, I am dealing with a table that consists of 5 columns and over a thousand rows. I need help with implementing a specific feature in one column, which can then be replicated to the other columns if successful. Due to varying text lengths within these columns, some of the texts may need to be truncated with "..." at the end. To achieve this, I have included the CSS property "text-overflow: ellipsis". My goal is to display a tooltip saying "HELLO everyone" only for the texts that are truncated because they are too long to fit inside the column.
Here is the HTML code for one of the five columns in my table:
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef class="table-header">
Title
</th>
<td
pTooltip="HELLO everyone"
(click)="toggleSeeMore(element)"
mat-cell
*matCellDef="let element"
class="title-column-news"
>
<div [style]="styleTitle(element.showSeeMore)">{{ element.title }}</div>
<div *ngIf="element.showSeeMore" style="margin-top: 10px">
<span>
<div [style]="styleTitle(element.showSeeMore)">{{ element.summary }}
<a
style="color:var(--limegreen); text-decoration: none;"
target="_blank"
[href]="element.file"
>
See more
</a>
</div>
</span>
</div>
</td>
</ng-container>
For styling purposes, here is the CSS code:
td {
color: var(--textLightGrey);
border-bottom: 1px solid var(--textLightGrey);
padding: 10px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}