I have a trouble with tooltip. It doesn't show up

Question

Tooltip doesn't show up. I've tried to display it with
<span id="error-dropdown">Here is error text</span> and opacity property in CSS, but it doesn't display anyway. Link

<img src="https://symboldev.pp.ua/_data/error-sign.svg" alt="Error" id="error">

#error {
    height: 30px;
    width: 30px;
}

#error::after {
    content: "Here is the tooltip text";
    display: block;
    width: 300px;
    height: 300px;
    background: #555;

    position: absolute;
    visibility: hidden;
}

#error:hover::after {
    visibility: visible;
}

It happens because my image doesn't show up an after pseudo-class, but why? — Michael, Jun 19 '19 at 09:47
Unfortunately, most browsers do not support using :after or :before on img tags, An img tag can not have child elements — Hiren Vaghasiya, Jun 19 '19 at 09:47

score 0 · Accepted Answer · answered Jun 19 '19 at 09:50

0

Here's a solution - just wrap a link around the image.

#error {
 height: 30px;
 width: 30px;
}

#error::after {
  content: "Here is tooltip text";
  display: block;
  width: 300px;
  height: 300px;
  visibility: hidden;
}

#error:hover::after {
 visibility: visible;
}

<a href="" id="error"><img src="https://symboldev.pp.ua/_data/error-sign.svg" alt="Error" id="error"></a>

answered Jun 19 '19 at 09:50

Andy Clarke

169
5

No problem. You may want to also look at the CSS so that you can remove the ID from the image and just have the link with an ID on it. – Andy Clarke Jun 19 '19 at 13:13

I have a trouble with tooltip. It doesn't show up

1 Answers1