CSS100Day(12)-hover出Tooltip技巧

1
<div class="frame">
2
    <div class="quote">
3
        <p>
4
            I know quite certainly that I myself have no special talent; curiosity,
5
            <span onclick="void(0);" class="tooltip"
6
                >obsession
7
                <span class="info">
8
                    <span class="pronounce">[əbˈseʃ(ə)n]</span>
9
                    <span class="text"
10
                        ><b>Obsession</b>, a persistent disturbing preoccupation with an often unreasonable idea or
11
                        feeling.
12
                    </span>
13
                </span>
14
            </span>
15
            and dogged endurance, combined with self-criticism have brought me to my ideas.
16
        </p>
17
        <p class="author">Albert Einstein</p>
18
    </div>
19
</div>

1
.frame {
2
    position: absolute;
3
    width: 400px;
4
    height: 400px;
5
    border-radius: 2px;
6
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
7
    background: #4cb6de;
8
    color: #fff;
9
}
10

11
.quote {
12
    position: relative;
13
    margin-top: 90px;
14
    padding: 0 30px;
15

16
    &::before {
17
        display: block;
18
        content: "„";
19
        position: absolute;
20
        top: 0;
21
        left: 0;
22
        font-size: 250px;
23
        color: #6ac2e3;
24
        font-family: Arial;
25
        line-height: 35px;
26
        top: -100px;
27
        left: 7px;
28
        z-index: 0;
29
    }
30

31
    p {
32
        position: relative;
33
        font-size: 24px;
34
        margin: 20px 0;
35
        z-index: 1;
36
    }
37

38
    .author {
39
        font-weight: 300;
40
        font-style: italic;
41
        line-height: 28px;
42
        font-size: 20px;
43
    }
44
}
45

46
.tooltip {
47
    position: relative;
48
    display: inline-block;
49
    background: #286f8a;
50
    padding: 0px 8px 5px 8px;
51
    cursor: pointer;
52
    margin: -10px 0;
53

54
    .info {
55
        visibility: hidden;
56
        position: absolute;
57
        background: #286f8a;
58
        box-sizing: border-box;
59
        bottom: 53px;
60
        left: -85px;
61
        font-size: medium;
62
        cursor: auto;
63
        width: 300px;
64
        opacity: 0;
65
        line-height: 24px;
66
        transform: translateY(-20px);
67
        transition: all 0.5s ease-out;
68

69
        &::before {
70
            position: absolute;
71
            content: "";
72
            width: 100%;
73
            height: 15px;
74
            bottom: -15px;
75
        }
76

77
        &::after {
78
            position: absolute;
79
            display: block;
80
            content: "";
81
            width: 10px;
82
            height: 10px;
83
            background: #286f8a;
84
            bottom: -5px;
85
            rotate: 45deg;
86
            left: 50%;
87
            margin-left: -5px;
88
        }
89

90
        .pronounce {
91
            display: block;
92
            background-color: #fff;
93
            color: #286f8a;
94
            padding: 8px 15px;
95
        }
96

97
        .text {
98
            display: block;
99
            padding: 15px 15px;
100
        }
101
    }
102

103
    &:hover .info,
104
    &:focus .info {
105
        display: block;
106
        visibility: visible;
107
        opacity: 1;
108
        transform: translateY(0);
109
    }
110
}