chevron-left chevron-right

Piotr Nalepa Blog webmasterski

[CSS] Dymki z podpowiedziami.

Ta wersja
Opublikowano
Autor
Kategoria
CSS
Uwagi
Napisz do mnie · Napisz na X

Ten wpis ma 17 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.

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:

Przykład 1CSS
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:
Przykład 2HTML
<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.

O autorze

Staff Software Engineer

Piszę na tym blogu od 2009 roku, a strony i aplikacje webowe tworzę zawodowo od 14 lat. Obecnie w Bishop Fox prowadzę frontend platformy Cosmos, od samego początku projektu. Wcześniej pracowałem m.in. w OLX, KUDO, Auto1 i eZ Systems. Piszę tu o tym, czego nauczyłem się w praktyce: o JavaScripcie, TypeScripcie, Reakcie, CSS-ie i architekturze frontendu. Występowałem też jako prelegent na konferencjach w Polsce i Europie. Masz pytanie albo pomysł na wpis? Daj znać!