• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Tooltips</title>
7
    <style>
8
        body { text-align: center; }
9
        .tooltip {
10
            position: relative;
11
            display: inline-block;
12
            margin: auto;
13
        }
14
        .tooltip .tooltip-content {
15
            visibility: hidden;
16
            width: 220px;
17
            background-color: orange;
18
            padding: 0;
19
            color: white;
20
            text-align: center;
21
            position: absolute;
22
            z-index: 1;
23
            bottom: 100%;
24
            left: 50%;
25
            margin-left: -110px;
26
        }
27
        .tooltip:hover .tooltip-content { visibility: visible; }
28
    </style>
29
</head>
30
​
31
<body>
32
​
33
    <h1>툴팁이 나타나는 위치 설정</h1>
34
    <br><br><br>
35
    <div class="tooltip">
36
        <span>여기에 마우스를 올려보세요!</span>
37
        <div class="tooltip-content">
38
            <p>위쪽에 나타나는 툴팁입니다!</p>
39
        </div>
40
    </div>
41
​
42
</body>
43
​
44
</html>