https://i.sstatic.net/o41Qz.png
Struggling with a tooltip that keeps getting cut off? I've tried everything and still can't get it right.
<th class="fd-table--header-cell" scope="col">
<p class="bold my-tooltip-header--cell" [innerHTML]="totals | fdContent"></p>
<a [attr.id]="totalsSelectory" [attr.aria-describedby]="totals"
href="javascript:void(0);" class="fd-tooltip-layer--selector">
<my-icon [myIconId]="totalsIconId" [content]="pageContent"
aria-label="icon" [title]="totals"></my-icon>
</a>
<my-tooltip [myId]="totals" [mySelector]="totals"
[content]="pageContent">
<div tooltip-content class="tooltip-margin">
<p aria-label="totals-tooltip--header"
[innerHTML]="totals| fdContent"></p>
</div>
</my-tooltip>
</th>
th {
position: relative;
white-space: nowrap;
}
.my-tooltip-header--cell {
display: inline;
}
.fd-table--header-cell {
border-right: none;
border-bottom: none;
height: em-calc(62px, 12px);
padding: em-calc(12px, 12px);
}