如何使用 CSS 在悬停时向图像添加工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36921421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add tooltip to image on hover with CSS
提问by YorkieMagento
I have three images, on hover they increase in size using :hover in css. When a user hovers over the image I'd also like a tooltip to appear with a description of the image (I should also be able to position the tooltip).
我有三个图像，悬停时它们使用 :hover 在 css 中增加大小。当用户将鼠标悬停在图像上时，我还希望出现带有图像描述的工具提示（我也应该能够定位工具提示）。
HTML
HTML
<div class="bottle-container">
<div class="click-to-top"><img src="image-1.png" alt="Image 1" />Tooltip text</div>
<div class="click-to-top" style="z-index:5;"><img src="image-2.png" alt="Image 2" /></div>
<div class="click-to-top last"><img src="image-3.png" alt="Image 3" /></div>
</div>
CSS
CSS
container{
max-width:600px;
margin:0 auto;
min-height:450px;
}
div.click-to-top {
display:inline-block;
position:relative;
max-width:160px;
}
div.click-to-top:hover{
z-index:10;
}
div.click-to-top img{
-webkit-transition: all 0.8s;
moz-transition: all 0.8s;
transition: all 0.8s;
width:130px;
}
div.click-to-top img:hover{
width:140px;
z-index:10;
}
回答by Vincent G
You can wrap the text into a <span></span>and show it on parent :hover
您可以将文本包装成 a<span></span>并将其显示在父级上:hover
CSS
CSS
div.click-to-top span {display: none; position: absolute; bottom: 0; left: 0; right: 0; background: #333; color: #fff; }
div.click-to-top:hover span {display: block; }
HTML
HTML
<div class="click-to-top"><img src="http://lorempicsum.com/futurama/350/200/1" alt="Image 1" /><span>Tooltip text</span></div>
回答by mlegg
Look at this codepen http://codepen.io/mlegg10/pen/reqGMZ
看看这个codepen http://codepen.io/mlegg10/pen/reqGMZ
/* `border-box`... ALL THE THINGS! */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 64px auto;
text-align: center;
font-size: 100%;
max-width: 640px;
width: 94%;
}
a:hover {
text-decoration: none;
}
header,
.tooltip,
.tooltip p {
margin: 4em 0;
text-align: center;
}
/**
* Tooltip Styles
*/
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}<div class="tooltip">
<p><button data-tooltip="I'm the tooltip text.">I'm a button with a tooltip</button></p>
</div>