html - 图像而不是链接的语音气泡工具提示？

Question

当您将鼠标悬停在链接上时，我会出现一些隐藏的对话气泡，例如此演示:

http://jsfiddle.net/mmorrell2014/e4q7K/

HTML:

<div id="container"><a href="#" class="hoverbubble">Hover over me!<span>Hidden message here.</span></a></div>

CSS:

#container {
background-color: #FF0;
margin: 100px;
float: left;
height: 200px;
width: 200px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}

a.hoverbubble {
position: relative;
text-decoration: none;
}

a.hoverbubble span {display: none;
}

a.hoverbubble:hover span {
display: block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: px;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -40px;
background: rgba(0,0,0,.8);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 0.86em;
font-family: Arial, Helvetica, sans-serif;
}

a.hoverbubble:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
position: absolute;
bottom: -20px;
left: 1em;
}

我想知道当您将鼠标悬停在图像而不是链接上时是否可以显示此工具提示？

Answer 1

如果您想要一个非常简单的解决方案，请像下面这样更改您的代码。

<div id="container"><a href="#" class="hoverbubble"><img src="sample.gif" border="0" /><span>Hidden message here.</span></a></div>

如果您不想使用 anchor 标记本身，请检查下面的 jsfiddle，我已经更新了您的代码。

http://jsfiddle.net/e4q7K/19/