• 코드:
​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
            top: -15px;
24
            right: 105%;
25
        }
26
        .tooltip:hover .tooltip-content { visibility: visible; }
27
    </style>
28
</head>
29
​
30
<body>
31
​
32
    <h1>툴팁이 나타나는 위치 설정</h1>
33
    <br><br><br>
34
    <div class="tooltip">
35
        <span>여기에 마우스를 올려보세요!</span>
36
        <div class="tooltip-content">
37
            <p>왼쪽에 나타나는 툴팁입니다!</p>
38
        </div>
39
    </div>
40
​
41
</body>
42
​
43
</html>