SVG图片元素的Tooltip显示不稳定问题求助

各位好，我现在遇到一个小问题，想请教下大家：

我用JavaScript创建了一个带有透明区域的SVG图标图片元素，代码是这样的：

const iconImg = document.createElement("img");
iconImg.className = "host-icon";
iconImg.src = `img/host-icons/rehost.svg`;
iconImg.style.width = "24px";
iconImg.style.height = "24px";
iconImg.title = "My tooltip";

这个图标带有透明区域，比如图标边框和内部文字之间存在不少空白的透明部分。

现在的问题是，我给这个img元素设置的tooltip（也就是title属性对应的提示框）显示很不稳定：如果把光标放在图标的非透明区域，tooltip能正常弹出来，但要是光标落在那些透明的空白位置，tooltip就完全没反应。

想问问大家，这是不是SVG图标搭配tooltip时的常见坑啊？有没有办法在不给图片加背景的前提下解决这个问题？另外我用的是Firefox浏览器，还给这个图标加了颜色滤镜，不知道这会不会影响tooltip的触发？

备注：内容来源于stack exchange，提问作者i know nothing