html - 我的工具提示有问题。它没有显示

This question already has answers here:

Does :before not work on img elements?
                                
                                    （12个答案）
                                
                        
                                7个月前关闭。
            
                    
工具提示未显示。我试图用CSS中的<span id="error-dropdown">Here is error text</span>和opacity属性显示它，但是无论如何它不会显示。 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;
}

最佳答案

这是一个解决方案-只需在图像周围包裹一个链接即可。

#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>

关于html - 我的工具提示有问题。它没有显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56664695/