Disabling default tooltips

[franciscojdev]

When I hover over an icon, the default tooltip shows up on the bottom right. Is there any way to disable this ? "pointer-events: none" works but it disables my hover animations.

[Siedlerchr]

It seems to be directly coming from the svg https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

[franciscojdev]

So, in this case, how do I go into the svg to change it ? Because I don't have them downloaded, I have them in my HTML through the code provided in the ion-icons website. Thanks :)

[martinklepsch]

"pointer-events: none" works but it disables my hover animations.

if you put the hover on the parent element and not the ion-icon element the color change should still work.

[ariscol]

Would really appreciate a way to disable the tooltip as well. I definitely don't want a tooltip every time I place one of these, since in many cases the icon is the root element for a custom (complex) tooltip or other functionality.

[peterpeterparker]

Tooltip comes from the <title>....</title> inside the <svg/>.

Question is: do we need the title for any reason, like accessibility? or is the title irrelevant?

If irrelevant, then can't we "just" remove it?

If yes, can be removed, then I guess it can be removed in the build script.

p.s.: <title>${svgData.title}</title> is the svg source file filename.

[ariscol]

It seems to me that if good accessibility were a motivator, you'd be even more obligated to provide a way to remove/disable/override the title, because in many cases the name of the icon may be confusing or even misleading. Accessibility can only be effectively supported by the site designer, and these titles, quite literally, get in the way of that effort.

Oh, and another reason I think it's a bad idea to have the title in the SVG: Internationalization.

[kaigon]

I got around the hover tooltip with CSS:

ion-icon:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

Doesn't resolve any accessibility issues that may be caused by having a non-applicable title tag, but it at least prevents the tooltip from being triggered without impacting other hover effects (at least none that I'm using).

[brandyscarney]

Thanks for the issue, closing this to track in #838.

[SurajanShrestha]

I got around the hover tooltip with CSS:

ion-icon:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

Doesn't resolve any accessibility issues that may be caused by having a non-applicable title tag, but it at least prevents the tooltip from being triggered without impacting other hover effects (at least none that I'm using).

@kaigon Thank you so much. This solved it for me 😌🙏.