How to add tooltip to image on hover with CSS


Tags: css,hover,tooltip

Problem :

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


Solution :

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


    CSS Howto..

    How to use top middle and center inside a div

    How to make top/bottom borders appear ontop of left/right borders crossbrowser css

    How to apply css just to element that curser is on?

    small space keeps showing to right side of my website w

    CSS - how to set some divs inline

    How to make Superfish menu vertical in first level but horizontal in second level?

    How to achieve a left and right background split leaving middle div visible?

    How to fade out after hover is done using CSS

    How to get a css stylesheet value that is not interpreted by the browswer?

    How to open links in a new tab/window using CSS? [duplicate]

    How to make a div grow with its children when inline-blocks don't fit anymore

    How to achieve proper CSS line-height consistency

    how to show like chat box for the div/p tag top left/right corners

    How to clear the parent css

    How implement a button clear in a RadDatePicker

    How to stop a CSS rule from applying to a specific element [duplicate]

    How do I make an inline-block stretch?

    How to solve Firefox 2.0 cross browser issues?

    How can I make my
    fit vertically into a parent div?

    How to center SVG within its container?

    How to make the background DIV only transparent using CSS

    How to make a foreground image using CSS?

    How to create a scrollable element within a floated element?

    how to avoid firefox to add overlay color on image click?

    Button element styled with CSS is not showing the background-image in IE6

    How to build HTML email using CSS?

    Textmate newbie question: how to indent CSS

    How to switch between specific CSS files using jQuery?

    How to append a CSS rule to the another CSS rule

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files