Всплывающая подсказка на CSS

[ale10ey]

Делал для сайта и может быть кому-нибудь пригодится.
У меня на странице имеется 8 одинаковых блоков <div></div> с разным содержанием и была необходимость при наведении указателя мышки "подсказать", что делать, конечно можно указать тег title, но для меня не совсем оптимальное решение, так как подсказка тут же исчезает при наведении, а хотел бы чтобы подсказка была все время пока указатель мыши находится в области блока.

Пример одного блока и подсказки "Узнать подробнее" на странице на скрине ниже



Следующий этап код css:

Код:

div#post { display: block; position: relative; }

div#post:hover::after {
    background: #fffdff;
    border-bottom: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    color: #525252;
    content: 'Узнать подробнее';
    font: 12px Arial, sans-serif;
    margin: auto;
    padding: 3px 10px;
    position: absolute;
    right: 24px;
    text-align: center;
    top: 1px;
    width: 105px;
    z-index: 10;
   }

Надеюсь с css объяснять ничего не нужно, подгоняем все под свои нужды, где #post -id моего блока <div>, который вы можете видеть на изображении выше.

Подсказка "Узнать подробнее" будет появляться быстро, плавность появления нельзя сделать, так как свойство transition не работает с псевдоэлементами, в моем случае ::after.
В браузерах Mozilla, Chrome, Opera все нормально, а вот в IE ниже 8 версии работать не будет из-за несовместимости с псевдоэлементами, как вариант вы можете попробовать заменить псевдокласс ::after на псевдоэлемент :after и добиться более или менее работающего варианта.

P.S.: Подсказка не зависит от указателя, она будет появляться в одном и том же месте. Изображение будущего сайта, который пока находится в стадии разработки и все данные, такие как дата или число комментариев сделаны для примера.