CSS工具提示未在IE，Safari上顯示，但在FireFox上有效

Question

仍在進行中，但注意到一個我無法解決的問題。.我非常擅長研究和弄清楚事情，但是沒有任何有關Web開發的正規教育，所以請耐心等待我。

我正在工作的站點 -當您將鼠標懸停在特定區域上時，會有一個帶有工具提示的圖像地圖。 在FF中效果很好，在IE和Safari中不顯示。 還是更好的實施方式？ 試圖遠離JavaScript。 謝謝！

我的密碼

 map { position: relative; } area + span { position: absolute; margin-left: -9999em; } area:hover + span { position: absolute; /* can only be positioned relative to the entire map, not the area */ left: 100px; top: -700px; z-index: 5000; color: #ffffff; background: #ec287a; border: 1px solid #ffffff; margin: 0; width: 600px; padding: 20px; } 

 <p style="text-align: center;"><img src="images/ruffwaytext.png" alt="" /></p> <center><img src="http://www.skilledgraphics.com/pawshie/images/ruffway.png" width="1200" height="670" usemap="#planetmap" /></center> <map name="planetmap"> <area shape="rect" coords="377,309,835,615" alt="Ruffway Hills" <a href="ruff" /><span><center><strong>RUFFWAY HILLS<br>Tottie loves stargazing here and pointing out constellations to her friends</strong></center></span> </map> 

Answer 1

嘗試像這樣編寫img標簽：

<img src="http://www.skilledgraphics.com/pawshie/images/ruffway.png" width="1200" height="670" usemap="#planetmap" title="tooltip text goes here blah blah blah" />

<img />標記中包含的title屬性應顯示引號中包含的內容的懸浮文本。 IE，FFox，Chrome，Safari和Opera支持。