Html Question posted in
Some basic documentation can be found here.

Html – Tooltip on "img" element containing an SVG doesn't show up consistently

In JavaScript, I’m creating an image element that shows an SVG icon that includes transparent parts:

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

The icon (here PNG)

The problem is that the tooltip I set for it doesn’t always show up reliably. It seems that if I position the cursor in a transparent area of the icon, the furthest points between the border and the text, it doesn’t trigger the tooltip. Is this a known quirk with icons and tooltips? How can I solve this without giving the image a background? I’m using Firefox and also applying a color filter to the icon, if that is of importance.

Tags:

2

Answers


  1. 0

    The simplest solution would be to just have the image inside a div container and attach a title to it.

    Alternatively, you can apply pointer-events: painted; to the img element, then hovering on the transparent part of the svg will show the tooltip.

    Login or Signup to reply.
  2. 0

    I’m pretty sure browsers ignore the transparent part of svgs when doing stuff like hovering. If i were you i wouldn’t rely on the browser for tooltips. Every browser has their own implementation. Use a custom tooltip implementation if you’re looking for consistency.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search