[CSS] Dymki z podpowiedziami.

W tym artykule mam zamiar przedstawić prosty, ale efektowny i miejscami przydatny efekt jakim są dymki z podpowiedziami.

Takie dymki są bardzo proste w utworzeniu, ale dają mnóstwo ciekawych możliwości.
W tym przykładzie zaprezntuję dwie możliwości: w dymku znajdziemy tekst oraz w dymku znajdziemy obrazek.
Kod CSS wygląda następująco:

body {
	font-family: Arial, Helvetica, sans-serif;
}
a: hover {
    background: #ffffff;
    text-decoration: none;
}
 
a.podpowiedz span {
    display: none;
    padding: 2px 3px;
    margin-left: 8px;
    width: 130px;
}
img {
	border: none;
}
a.podpowiedz:hover span{
    display: inline;
    position: absolute;
	margin: 15px 0 0 5px;
    background: #dddddd;
    border: 1px solid #b30000;
    color: #000000;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
	text-align: center;
}

Natomiast kod HTML wygląda tak:

<p>Podpowiedź <a class="podpowiedz" href="#">w dymku<span>To jest taki sobie dymek :)</span></a>. Bla bla bla jakis tekst.</p>
        <p>A tu inny <a class="podpowiedz" href="#">dymek<span><img src="../demo/PN.png" width="69px" height="69px"></span></a> z obrazkiem w środku.</p>

Jak widać, jest to bardzo prosty kod. Demo z tego artykułu można znaleźć tutaj.