Prithviraj Mitra Prithviraj Mitra - 2 years ago 60
CSS Question

tooltip box not showing using css

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.

My code:

<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="" class="graph one"> </a>

Jsfiddle :

For some reason I can't get the tooltip box.


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download