如何添加工具提示圖像懸停與CSS

我有三個圖像，懸停他們增加大小使用：懸停在CSS。當用戶將鼠標懸停在圖片上時，我還想讓一個工具提示與圖片的描述一起顯示（我也應該能夠定位工具提示）。如何添加工具提示圖像懸停與CSS

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

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; 
}

來源

2016-04-28 YorkieMagento

這[answer]（https://stackoverflow.com/questions/11716916/tooltip-on-image）必須是最好的，因爲它使用內置的html屬性。 – lilabnersgal

你可以用文成<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" alt="Image 1" /><span>Tooltip text</span></div>

Fiddle

來源

2016-04-28 17:33:31

看這個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>

來源

2016-04-28 17:39:06 mlegg

如何添加工具提示圖像懸停與CSS

回答

相關問題