chevron-left chevron-right

[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