I am trying to show a tool tip box on hover an image. I won't be able to use jquery or any other plugin. I have to use pure css. I have seen a demo working here.
http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-simple-css3-tooltip/tooltip_demo.html
My code:
<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one"> </a>
Jsfiddle :
For some reason I can't get the tooltip box.
UPDATED : http://jsfiddle.net/Md5E6/4/
Here is one solution: EXAMPLE HERE
Change .tooltip
from inline
to inline-block
:
.tooltip {
display: inline-block;
position: relative;
}
Then remove the absolute positioning from the child img
element. This was causing the main problem; as the element was removed from the flow of the document, thus causing the parent element to have no dimensions and collapse upon itself.