使图像显示在悬停上

我正在尝试制作一个工具提示系统，如果鼠标悬停在属性为tooltip（将评估为图像路径）的跨度元素上，图像将显示在屏幕的右上方。使图像显示在悬停上

<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:url("graphics/new_folder")代替content: attr(tooltip);即可显示图像，但造型与其交互很奇怪。给它position:fixed,float:right和float:top不仅不改变其位置，而且从视口的角度不影响图像。给予它height和width值也奇怪地与定位一起玩。

所以，多的问题在这里：

我怎样才能让content:attr(tooltip)有效地渲染图像？
如何使属性正确应用于图像/将图像置于屏幕的右上方？
我是否忘记了可以做到这一点的API？我希望有一个存在，但找不到一个。

我一直在努力解决这个问题，现在我非常感谢！

来源

2016-03-28 Code M4aster

您必须将图像标签与需要悬停应该有一个onMouseover事件与document.getElementById('open').style.display=呼叫教导帮助标签元素设置为<img src='my_image' style='display:none;' id='open'>

现在。

来源

2016-03-28 02:52:42

你不能这样做的css content:attr()你必须使用<img src="">内跨度和比悬停在它的图像将显示，但你不能这样做通过css content:attr()。

替代ü可以用做同样的事情data的Attr即data-tooltip="graphics/new_folder"

来源

2016-03-29 11:49:24

你能否澄清？我将使用什么CSS来使用值'data- *'？关于'data- *'的MDN用户指南说要使用attr（）。 –

https://jsfiddle.net/mhmpretx/1/看到这个小提琴@ CodeM4aster –

使图像显示在悬停上

回答

相关问题