Search code examples
htmlcssangulartooltip

How to adjust Mat Tooltip position to center of the screen?

I have a mat tooltip for a table element on a page that is embedded in an iframe on a page. When I want to see the tooltip, if the text is long, a tooltip is exceeding the limits of the frame. enter image description here

And the position is adjusted as "after":

<ng-container cdkColumnDef="budgetGroupName">
          <mat-header-cell *cdkHeaderCellDef fxFlex="20%">Budget Group</mat-header-cell>
          <mat-cell matTooltip="{{payroll.budgetGroupName}}" matTooltipPosition="after" *cdkCellDef="let payroll"
                    fxFlex="20%"><div class="wrapped-text">{{payroll.budgetGroupName}}</div></mat-cell>
        </ng-container>

I tried "right", "above" as well but they are also going to outside of frame. Can I adjust it to for example "center of the screen" or smth else to see more clearly? Or I need to use only this 6 different option for positioning like right,left-above, belove, after, before or can I adjust manually to middle of the screen ?

Or, if it is possible, if there is a function to put a scroll on tooltip text, i can use it as well to see the full content

Solution

  • This is exactly the problem i am facing last month using mat-tooltip as it didn't allow any HTML support so i came up with the solution which works perfectly in all case and also fully customize-able. sat-popover

    <button [satPopoverAnchor]='popover' (click)="popover.toggle()">
  See Contact Details
</button>

<sat-popover #popover hasBackdrop>
  <app-contact-overview [contact]="myContact"></app-contact-overview>
</sat-popover>

    I also try ng2-tooltip-directive but it some time show tooltip on random position so i prefer using sat-popover over it.

    I also post that question on stack-overflow angular-material-tool-tip-with-html-support