всплывающая подсказка не отображается с помощью css

Question

Я пытаюсь показать окно подсказки при наведении изображения. Я не смогу использовать jquery или любой другой плагин. Я должен использовать чистый css. Я видел демо, работающий здесь.

http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-simple-css3-tooltip/tooltip_demo.html

Мой код:

<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/

По некоторым причинам я не могу получить окно подсказки.

ОБНОВЛЕНО: http://jsfiddle.net/Md5E6/4/

Answer 1

Вот одно решение: EXAMPLE HERE

Изменение .tooltip из inline в inline-block:

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

Затем удалите абсолютное позиционирование из детского img элемента. Это вызывало основную проблему; поскольку элемент был удален из потока документа, что приводит к тому, что родительский элемент не имеет размеров и сворачивается сам по себе.

Answer 2

использование так, чтобы показать всплывающую подсказку

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

Если вы хотите просмотреть полный код с демо здесь полный учебник Create CSS3 Tooltip