<ion-icon> ignores title property?

Ionic Framework Ionic Angular
1

In my app, I have this inside an ion-card-header:
<ion-icon name="beer" title="IPA"></ion-icon>
shows the tooltip ‘Beer’ when hovered.
On stackblitz it shows ‘IPA’ which is what I expect.
https://stackblitz.com/edit/ionic-angular-v5?file=src/app/app.component.html
We are on Ionic 5.5;
Any clues?
thanks!

1 Like
2

I remembered a workaround for this, which was to wrap the icon in a span which had the desired title, and then to apply pointer-events:none to the icon itself;
But maybe someone else has a cleaner solution or insight into why this happens?
Why would you ever want the “name” to be shown as a tooltip?

3

This is the only solution that works:

<span title="whatever">
  <ion-icon name="home-outline" style="pointer-events:none"></ion-icon>
</span>

It might remove some of your CSS Styling , but you can replace it.