search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS] Jak zrobić animowany tooltip?

[CSS] Jak zrobić animowany tooltip?

Dzisiejszy tekst będzie dotyczył tworzenia efektownych dymków nad wybranym elementem podczas najechania na niego kursorem myszki.
Jest to użyteczna technika, która działa we wszystkich nowych przeglądarkach (poza IE).

Kod HTML dla dymka

Na początek należy przygotować odpowiednią strukturę HTML, dla której stworzymy odpowiedni efekt. Kod wygląda następująco:

1
2
3
4
<p class="tekst">
    Element z dymkiem.
    <span class="dymek">Dymek :)</span>
</p>

Zdefiniowaliśmy paragraf z tekstem wewnątrz. Element span ma funkcję dymka dla zaznaczonego tekstu.

Kod CSS - miejsce animacji

Kolejnym krokiem jest utworzenie kodu CSS odpowiedzialnego za uzyskanie efektu animacji pojawiającego się dymka z tekstem. Kod CSS wygląda następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.tekst {
    background: #ececec;
    color: #555;
    cursor: pointer;
    font-family: 'Ubuntu Condensed', sans-serif;
    font-size: 20px;
    margin: 100px 75px 10px 75px;
    padding: 15px 20px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 200px;
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

Zdefiniowaliśmy style dla tekstu w elemencie mającego klasę teskt. Wykorzystałem tutaj dwie opcje kodu CSS: -webkit-transform oraz -webkit-font-smoothing. Mają one funkcje zdecydowanie dekoracyjne. Pierwsza z nich odpowiada za obracanie elementu, a druga z nich odpowiada za wygładzanie czcionki tekstu.

Następnym krokiem będzie przygotowanie stylów CSS dla dymka. Kod wygląda następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
.tekst .dymek {
    background: #b30;
    bottom: 100%;
    color: #fff;
    font-weight: 700;
    display: block;
    left: -25px;
    margin-bottom: 15px;
    opacity: 0;
    padding: 20px;
    position: absolute;
    visibility: hidden;
    width: 100%;
    -webkit-transform: translateY(10px);
       -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
         -o-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
         -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.tekst .dymek:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}
.tekst .dymek:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid #1496bb 10px;
    bottom: -10px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    width: 0;
}
.tekst:hover .dymek {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
}

Powyższy kod odpowiada za cały efekt animacji. Zdefiniowano efekt cienia - box-shadow, przejścia - transition i pozycji - transform. Dodatkowo za pomocą pseudoklasy :after utworzono trójkątny element dodający element wyjścia dymka.

Podsumowanie

Mam nadzieję, że ten krotki wpis okaże się pożyteczny w tworzeniu stron WWW.
Demo z tego artykułu można zobaczyć tutaj: CSS animowany dymek

  • KrisNH

    Bardzo ładny efekt, który można wykorzystać także do wykonania ładnego menu rozwijanego. 😀

  • Jakub

    Właśnie próbuję wstawić ten tooltip na moją stronę i jak na razie wszystko ładnie działa tylko nie wiem jak zrobić żeby rozwijał się np. w prawą stronę. Czy mógłby ktoś nakierować jak to zrobić ?
    Dzięki.

  • Piotr Nalepa

    Jasne, daj translateX zamiast translateY. X i Y to osie z układu współrzędnych.

  • Jakub

    Pozmieniałem translateY na translateX i nadal nie działa.
    Zamiast tego tekstu w przykładzie użyłem obrazka, z którego wychodzi ten dymek. Czy muszę coś dodatkowo zmienić ?

  • Jakub

    Ok już mi wszystko działa ;] Zacząłem pisać stronę od początku i załapało. Dzięki.

  • Niezły efekt 😉 Na pewno się przyda taki efekcik na stronie 😉

  • webamator

    ”Jest to użyteczna technika, która działa we wszystkich nowych przeglądarkach (poza IE).”
    Demo z tego artykułu działa na IE – to czemu nie działa na mojej stronie, co może być nie tak ? – na podglądzie jest widoczny dymek, ale publicznie nie.

  • w IE nie ma animacji