Category : tooltip

I have a group of buttons with tooltips. Currently I’m setting the tooltip class for each as below. I’m wondering if there is a way to set the tooltip class once, without replicating it for every button. Setting it in the parent doesn’t work. <div class="the-parent"> <img src="icon1" matTooltip="Tip 1" matTooltipClass="my-tooltip-class"/> <img src="icon2" matTooltip="Tip 2" ..

Read more

I have a table like this: <table> <tr> <td><span tooltip-placement="bottom" tooltip-html-unsafe="texto del tooltip"></<span></td> </tr> </table> The code of table is an example I have some rows and only 1 with tooltip, if the row with tooltip is the last row, the tooltip is not visible you have to do scroll to see it, but when ..

Read more

<tr data-ng-repeat="fila in variable" > <td class="celda" data-ng-repeat="column in fila track by $index">Fila</td> <td class="celda" data-ng-repeat="column in fila track by $index" ng-if="tooltip-placement="bottom" tooltip-html-unsafe="Prueba">Fila</td> </tr> I have this html, the tooltip shows okay but when is visible the tooltip also moves all the row. I have also try to put the tooltip inside a inside the ..

Read more

<tr data-ng-repeat="fila in variable" > <td class="celda" data-ng-repeat="column in fila track by $index">Fila</td> <td class="celda" data-ng-repeat="column in fila track by $index"><span tooltip-placement="bottom" tooltip-html-unsafe="Prueba de un tooltip largo">Fila</span></td> </tr> I have this html, the tooltip shows okay but if the tooltip text is too large the last tooltip text appears outside the tooltip. Is there any ..

Read more

I need to hide a MatTooltip manually when I set the matTooltipHideDelay to a fixed value. It works without matTooltipHideDelay when I press the ESC button, but I need a tooltip to stay there for at least 2 minutes. Any help would be great. Thanks in advance. comp.HTML <button #tooltip="matTooltip" class="header-button" matTooltip="Logout" matTooltipHideDelay="5000" (click)="logout()" > ..

Read more

I am using an HTML tooltip in a table inside for loop. The HTML tooltip is working fine but the tooltip placement is wrong. search.componant.html: <tbody> <tr *ngFor="let item of serchResults"> <ng-template #tooltipData><p [innerHtml]="createTooltip(item)"></p></ng-template> <td data-container="body" data-toggle="tooltip" data-html="true" [tooltip]="tooltipData" containerClass="customClass" placement="bottom" > {{item.title}} </td> <td><input type="checkbox" id="item.code" name="item.code" value="item.code" (change)="fieldsChange($event, item)"></td> </tr> </tbody> searchcomponant.ts: createTooltip(item) ..

Read more