CODEWITHSUNDEEP
csstooltip
Prithviraj Mitra
Prithviraj Mitra

Reputation: 11812

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.

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 :

http://jsfiddle.net/txeF2/

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

UPDATED : http://jsfiddle.net/Md5E6/4/

Upvotes: 4

Views: 7450

Answers (3)

Jolly Good
Jolly Good

Reputation: 550

For me the reason was my parent div had an attribute "pointer-events: none". Removing this fixed my tooltip not showing issue for the child div.

Upvotes: 0

eddy
eddy

Reputation: 1

use like this to show tooltip 

<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a>

 .tooltip
 {
  display: inline;
  position: relative;
 }

 .tooltip:hover:after
 {
  background: #333;
  background: rgba(0,0,0,.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(title);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
 }

If you want to view complete code with demo here is a full tutorial Create CSS3 Tooltip

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240888

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.

Upvotes: 3

Related Questions