chevron-left chevron-right

[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.

  • Wielkie dzięki.

  • wojtek

    Dziekuje za porade. Dymki nie wyswietlaja sie jednak w przegladarkach Safari oraz Google Chrome? Jak zmusic wymienione programy do wyswietlania dymkow? Z gory dzieki za odpowiedz!

  • Przydatny bajer.
    @wojtek, napewno dobrze zaimplementowałeś ten kod? Mnie działa pod każdą przeglądarką bez zarzutu.

  • Tomasz

    Witam,
    Fajna sprawa, własnie czegoś takiego szukałem, mam tylko jeden problem – chciałbym wewnątrz dymku umieścić link przez znacznik , jednak wtedy wszystko mi się rozjeżdża :/ Istnieje jakiś sposób na to? Dokonałem pewnych zmian, zamiast linku, jako elementu powodującego wywołanie dymku zrobiłem komórkę tabeli, czyli … i wewnątrz linki. Oczywiście z kodu css usunąłem a przed kropkami, no i powiem, że to działa, jednak tylko na Operze i Chrome, natomiast IE oraz Firefox tego nie trawią i po prostu dymek się nie wyświetla. W jaki sposób można by sobie z tym poradzić?

  • Tomasz

    Trochę kopania po necie i znalazłem rozwiązanie. IE rozpoznaje hover tylko na znaczniku , więc konieczne jest zastosowanie fixa, żeby rozpoznawał hover też dla innych elementów.

    Link do fixa: http://code.google.com/p/ie7-js/

    Natomiast jeśli chodzi o FF, to działa bez takiego kombinowania, ale w css trzeba dodać znacznik na, który ma reagować hover, czyli jeśli reakcja ma być po najechaniu na diva, to dodajemy div.podpowiedz {} i div.podpowiedz:hover {} (a nie zostawiamy samo .podpowiedz, jak to robiłem wcześniej).

  • Basia

    A mi działa tylko pod IE ale pod operą i ff w ogóle nie widać ramki pojawia się tylko goły tekst, dlaczego?

  • zajrzyj do kodu z wersji demo, a może się dowiesz dlaczego u Ciebie nie działa

  • Darek

    Jestem początkującym jeśli chodzi o Joomle Powie mi ktoś gdzie trzeba wkleić ten kod tzn do jakiego pliku w Joomla 1.5 tak, aby te dymki się wyświetlały.

  • Musisz wkleić ten kod do pliku css odpowiedzialnego za wyświetlenie aktualnego szablonu.
    Poszukaj w katalogu templates na serwerze.

  • Michał

    Super kodzik ślicznie dziękuję 🙂

  • Łukasz

    Kod działa 🙂 Użyłem do buttonów ale okienko chowa się częściowo pod button obok ;/ Jakaś rada ?

  • Dariusz

    Genialne