html - 使图像出现在悬停时

Question

我正在尝试制作一个工具提示系统，如果鼠标悬停在具有属性 tooltip 的 span 元素上(这将评估为图像的路径)，图像将显示在屏幕的右上角。

<style>
    span[tooltip]:hover:after{
        content: attr(tooltip);
        margin-left:auto;
        }
</style>
<p><span tooltip='url("graphics/new_folder")'>Click "New">"Folder upload"</span> and upload the folder from its location</p>

简单地在 span 元素之后呈现文本 url("graphics/new_folder")。将 content: attr(tooltip); 替换为 content:url("graphics/new_folder") 显示图像，但样式与它的交互很奇怪。给它 position:fixed, float:right 和 float:top 不仅不改变它的位置，而且不影响从视口(viewport)的 Angular 看图像。给它 height 和 width 值也很奇怪地玩定位。

所以，这里有多个问题:

1. 如何使 content:attr(tooltip) 有效地呈现图像？
2. 如何使属性正确应用于图像/使图像位于屏幕的右上角？
3. 我是否忘记了可以执行此操作的 API？我希望有一个存在，但找不到。

我已经为此苦苦挣扎了一段时间，非常感谢您的帮助!

Answer 1

你不能通过 css 做到这一点 content:attr()你必须使用 <img src="">在 span 内，而不是将鼠标悬停在它上面，图像会显示，但你不能通过 css 做到这一点 content:attr() .

您也可以使用 data 做同样的事情属性即 data-tooltip="graphics/new_folder"