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).
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;
}
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
Pure CSS to swap image on hoverThe best way to swap images on hover is to place both images in the same container, with the "rollover" image transparent by default. When the user hovers over the container, the "rollover" image becomes opaque. It is fast loading, easy to implement and works on all browsers.
You can create custom CSS tooltips using a data attribute, pseudo elements and content: attr() eg.
You can wrap the text into a <span></span>
and show it on parent :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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With