包含 SVG 的“img”元素上的工具提示未一致显示

Question

在 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";

问题是我为其设置的工具提示并不总是可靠地显示。看来，如果我将光标放置在图标的透明区域（边框和文本之间的最远点）中，它不会触发工具提示。这是图标和工具提示的已知怪癖吗？在不给图像设置背景的情况下如何解决这个问题？我正在使用 Firefox，并且还在图标上应用了颜色滤镜（如果这很重要的话）。

Answer 1

最简单的解决方案是将图像放在 div 容器中并为其附加标题。