in angular material it provide matTooltip attribute to show tooltip . i want to show arrow with tooltip pointing towards overflow text. but tooltip position is dynamic based on target element position in corners , top or bottom based on that appending arrow in tooltip design as per tooltip position is difficult , i applied bellow solution but works only if i open tooltip at specified position top, bottom , left or right
.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>
It can be done as follow:
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);
}
}
}
In component.ts file:
positionOptions: TooltipPosition[] = ['below', 'above', 'left', 'right'];
// You can change the logic of currentPosition according to your requirements
currentPosition= this.positionOptions[0];
In html file:
[matTooltipPosition]="currentPosition"
[matTooltipClass]="currentPosition"