How to not show icon name

Ionic Framework
1

Hi, I am using Angular material tooltip and it is working normally. After some seconds with mouse over, the name of icon appear, is there any way to not show the icon name?

image

<ion-icon name="logo-whatsapp" matTooltip="{{'tooltip.wpMessageSent' | transloco}}" matTooltipPosition="right" class="mr-1"></ion-icon> {{ data.smsWp }}
2

Hey @RRVieira if it is possible as per your structure you can wrap the ion-icon with a span tag and give the tooltip to the span tag. It might solve your problem.

3

Hi @FreakyMind … Thanks for your tip and sorry, long time to feedback, I was solving others problems … But not worked…

image

4

Can you please show me your code…

If you have given the tooltip to the span tag then you can do one more thing, give pointer events none to the icon… for example.

<span matTooltip="{{'tooltip.wpMessageSent' | transloco}}" matTooltipPosition="right">
          <ion-icon name="logo-whatsapp" class="mr-1"></ion-icon> {{ data.smsWp }}
 </span>

CSS

span ion-icon{
pointer-events: none;
}
5

Hi @FreakyMind … The code is working like this.

<span matTooltip="{{'tooltip.wpMessageSent' | transloco}}" matTooltipPosition="right">
                <ion-icon name="logo-whatsapp" class="ml-4 mr-1" style="transform: scale(1.8);"> 
               </ion-icon> 1
 </span>

image