如何使用 CSS 在悬停时向图像添加工具提示

Posted 2023-05-08

【中文标题】如何使用 CSS 在悬停时向图像添加工具提示

【英文标题】：How to add tooltip to image on hover with CSS

【发布时间】：2016-08-23 14:47:35

【问题描述】：

我有三张图片，在悬停时它们使用 :hover 在 css 中增加大小。当用户将鼠标悬停在图像上时，我还希望显示带有图像描述的工具提示（我也应该能够定位工具提示）。

HTML

<div class="bottle-container">
<div class="click-to-top"><img src="image-1.png"  />Tooltip text</div>
<div class="click-to-top" style="z-index:5;"><img src="image-2.png"  /></div>
<div class="click-to-top last"><img src="image-3.png"  /></div>
</div>

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;

【问题讨论】：

这个answer 必须是最好的，因为它使用了内置的 html 属性。

【参考方案1】：

您可以将文本包装成<span></span> 并在父:hover 上显示

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

<div class="click-to-top">
  <img src="http://lorempicsum.com/futurama/350/200/1"  />
  <span>Tooltip text</span>
</div>

Fiddle

【参考方案2】：

看看这个代码笔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>