画像をホバリングにする

Question

私はツールチップシステムを作ろうとしています。マウスが（画像のパスと評価される）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: attr(tooltip);をcontent:url("graphics/new_folder")に置き換えると、イメージが表示されますが、スタイリングはそれと奇妙なやり取りをします。 position:fixed、float:right、およびfloat:topは、位置を変更するだけでなく、ビューポートの視点からの画像にも影響しません。それをheightとwidthという値を与えると、あまりにも奇妙な位置で再生されます。ここ

ので、複数の質問：私はcontent:attr(tooltip)が効果的に画像をレンダリングすることができますどのように

1. ？
2. プロパティを画像に適切に適用したり、画像を画面の右上に取得するにはどうすればよいですか？
3. これを行うAPIを知らないのですか？私は1つは存在すると思うが、見つけられないだろう。

私はしばらくこの問題に取り組んできました。

Answer 1

あなたはそれが助け教えdocument.getElementById('open').style.display=の呼び出しでonMouseoverイベントを持っている必要がありホバリングを必要とするタグ要素を今すぐ<img src='my_image' style='display:none;' id='open'>

として画像タグを設定する必要があります。

Answer 2

これはCSSで行うことはできませんcontent:attr()<img src="">スパンの内側にホバー以上の画像が表示されますが、これはCSS content:attr()で行うことはできません。

代替uが使用して同じことを行うことができますdataたAttrすなわち