en material angular, proporciona el atributo matTooltip para mostrar información sobre herramientas. quiero mostrar una flecha con información sobre herramientas que apunta hacia el texto de desbordamiento. pero la posición de la información sobre herramientas es dinámica en función de la posición del elemento de destino en las esquinas, arriba o abajo según la flecha adjunta en el diseño de la información sobre herramientas según la posición de la información sobre herramientas es difícil, apliqué la solución a continuación pero funciona solo si abro la información sobre herramientas en la posición especificada arriba, abajo, izquierda o hacia la derecha
.mat-tooltip::before { content : ''; display : block; position : absolute; bottom : 100%; border-style: solid; border-color: transparent transparent #3E464E transparent; border-width: 12px; left : calc(50% - 12px); } <div class="title-ellips" matTooltipClass="custom-tooltip" matTooltip="{{exam | examColumnValue: column}}" *ngIf="((exam[column]) && ((exam | examColumnValue: column).toString().length>=30))" placement="top" data-container="body" tooltipClass="customTableTooltip"> {{exam | examColumnValue: column}} </div>Se puede hacer de la siguiente manera:
CSS:
.mat-tooltip { position: absolute; &::after { width: 0; height: 0; content: ''; position: absolute; border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-bottom: 0.5rem solid black; } &.below { overflow: initial; margin-top: 1rem; &:after { top: -0.5rem; right: calc(50% - 0.5rem); transform: rotate(0); } } &.above { overflow: initial; margin-bottom: 1rem; &:after { bottom: -0.5rem; right: calc(50% - 0.5rem); transform: rotate(180deg); } } &.right { overflow: initial; margin-left: 1rem; &:after { left: -0.75rem; top: calc(50% - 0.25rem); transform: rotate(270deg); } } &.left { overflow: initial; margin-right: 1rem; &:after { right: -0.75rem; top: calc(50% - 0.25rem); transform: rotate(90deg); } } }En el archivo componente.ts:
positionOptions: TooltipPosition[] = ['below', 'above', 'left', 'right']; // You can change the logic of currentPosition according to your requirements currentPosition= this.positionOptions[0];En archivo html:
[matTooltipPosition]="currentPosition" [matTooltipClass]="currentPosition"